StateSave Not Working with UpdatePanel

StateSave Not Working with UpdatePanel

DotDevsDotDevs Posts: 3Questions: 1Answers: 0
edited January 2018 in Free community support

Please see my code below. No matter what I do The StateSave feature wont work and Datable does not store paging information on Postback.```

```<link href="../DataTables/datatables.min.css" rel="stylesheet" />
<script src="../DataTables/datatables.min.js"></script>
<script type="text/javascript">
function tableCreate() {

        $("#removefilter").hide();
        var t = $('#datatable').DataTable({
            "dom": 'lfrBtip',
            buttons: [
   {
       extend: 'excelHtml5',
       text: '<i class="fa fa-file-excel-o"></i>',
       titleAttr: 'Excel'
   },
   {
       extend: 'print',
       text: '<i class="fa fa-print"></i>',
       titleAttr: 'print'
   }
            ],
            retrieve: true,
            //deferRender: true,
            stateSave: true,
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "columnDefs": [
                { targets: 0, searchable: false, orderable: false, order: [] },
                  { targets: 2, searchable: true, orderable: false, order: [] },
                  { targets: 3, searchable: true, orderable: false, order: [] },
                   { targets: 4, searchable: false, orderable: false, order: [] },
                { targets: 5, searchable: false, "orderable": false, "order": [] },
            { targets: 6, searchable: false, "orderable": false,  "order": [] },
        { targets: 7, searchable: true, "orderable": false, visible: false, "order": [] },
          { targets: 8, searchable: true, "orderable": false, visible: false, "order": [] }

            ],
            initComplete: function () {
                var n = 0, r = 0, u = 0;
                var column = this.api().column(7);
                var select = $('#StatusDropdown');
                column.data().unique().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });
                column = this.api().column(8);
                select = $('#StateDropdown');
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });

            }
        });

        $('#StatusDropdown').on('change',
         function () {
             $('#StateDropdown').prop('selectedIndex', 0);
             t.search(this.value).draw();
             $("#removefilter").show();
         });
        $('#StateDropdown').on('change',
           function () {
               $('#StatusDropdown').prop('selectedIndex', 0);
               t.search(this.value).draw();
               $("#removefilter").show();
           });
        ////t.state.loaded();
        //t.on('column-reorder', function (e, settings, defaults) {
        //    t.state.save(); // to save the current state explicitly
        //});

        t.on('order.dt search.dt',
           function () {
               t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
                   cell.innerHTML = i + 1;
               });

           }).draw();
        $('#Selections').detach().appendTo('#tools');
        t.buttons().container().appendTo($('#ButtonContainer', t.table().container()));
      }

    $(document).ready(function () {
        tableCreate();

       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(tableCreate);
        $('#datatable tbody').on('click', 'tr', function () {
            $(this).toggleClass('selected');
        });
    });
</script>```

```My Client Side is above. I tried everything but cannot get DataTable to maintain paging.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 62,338Questions: 1Answers: 10,228 Site admin

    Thanks for your question. As noted in the forum rules, please post a link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Allan

  • DotDevsDotDevs Posts: 3Questions: 1Answers: 0

    Allan,

    The page is a ASP.NET Webforms using a MasterPage. The DataTable has been initialized inside of a ListView Control which in an Update Panel.

    The page for your consideration is here

    Also, I paid for priority support using PayPal, and that too is yet to show up in my Account Profile .

    I really appreciate your help on this

  • allanallan Posts: 62,338Questions: 1Answers: 10,228 Site admin
    Answer ✓

    Thanks - I don't see anything in PayPal relating to a payment for quick support I'm afraid.

    I believe the problem you are seeing is that you call draw() on line 240 after initialising the table. That will reset the paging. I don't believe that draw() call is needed - could you remove it and see if that helps?

    Allan

  • DotDevsDotDevs Posts: 3Questions: 1Answers: 0

    You are amazing :) 3 cheers to You!!!

This discussion has been closed.