StateSave Not Working with UpdatePanel
StateSave Not Working with UpdatePanel
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
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
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
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 thatdraw()
call is needed - could you remove it and see if that helps?Allan
You are amazing 3 cheers to You!!!