how to force the datatable stay on the same page ?

manp

Hello,

First, I would like to thank you guys for the wonderful datatable column filter plugin. I was able to apply the plugin on an ASP.NET Gridview control. I have sorting, filtering, paging features on the datatable and the datatable itself is working as expected. Now, I have added one more column to the datatable which has checkboxes for each row and a checkbox in the header for that row. And I had added a few javascript code such that when the header checkbox is clicked, all the checkboxes in all the rows on that page of the gridview (datatable) would get checked, which is also working with exception of one issue that I am running into.

When the datatable displays the data, when I click on Page 2 and check the checkbox in the header, its checking all the checkboxes in all the rows on Page 2 but its bringing back the users to Page 1. I mean its checking the items in Page 2 but displays Page 1. I tried to use fnStandingRedraw() function but didnt have any success yet.

Below mentioned is the code:

$(document).ready(function() {

function fixGridView(tableEl) {
var jTbl = $(tableEl);

if (jTbl.find("tbody>tr>th").length > 0) {
jTbl.find("tbody").before("");
jTbl.find("thead tr").append(jTbl.find("th"));
jTbl.find("tbody tr:first").remove();
}
}

fixGridView($("#gv_Prov_To_Add"));
//$("#gv_Prov_To_Add").GridviewFix({ header: "headerStyle", row: "rowStyle", footer: "footerStyle" }).dataTable().columnFilter();
$("#gv_Prov_To_Add").GridviewFix({ header: "headerStyle", row: "rowStyle", footer: "footerStyle" }).dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"bStateSave": true
}).columnFilter({
aoColumns: [null,
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
// { type: "text" },
{type: "text" },
{ type: "text" },
{ type: "text" }
]

});

$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
if (oSettings.oFeatures.bServerSide === false) {
var before = oSettings._iDisplayStart;

oSettings.oApi._fnReDraw(oSettings);

// iDisplayStart has been reset to zero - so lets change it back
oSettings._iDisplayStart = before;
oSettings.oApi._fnCalculateEnd(oSettings);
}

// draw the 'current' page
oSettings.oApi._fnDraw(oSettings);
};

});

These are the js functions:

function HeaderClick(CheckBox)
{
var oTable = $("#gv_Prov_To_Add").dataTable();
oTable.fnStandingRedraw();

//Get target base & child control.
var TargetBaseControl = document.getElementById('<%= this.gv_Prov_To_Add.ClientID %>');
var TargetChildControl = "ChkBox_Prov_To_Add";

//Get all the control of the type INPUT in the base control.
var Inputs = TargetBaseControl.getElementsByTagName("input");

//Checked/Unchecked all the checkBoxes in side the GridView.
for(var n = 0; n < Inputs.length; ++n)
if(Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl,0) >= 0)
Inputs[n].checked = CheckBox.checked;
//Reset Counter
Counter = CheckBox.checked ? TotalChkBx : 0;
}

function ChildClick(CheckBox, HCheckBox)
{
//get target base & child control.
var HeaderCheckBox = document.getElementById(HCheckBox);

//Modifiy Counter;
if(CheckBox.checked && Counter < TotalChkBx)
Counter++;
else if(Counter > 0)
Counter--;

//Change state of the header CheckBox.
if(Counter < TotalChkBx)
HeaderCheckBox.checked = false;
else if(Counter == TotalChkBx)
HeaderCheckBox.checked = true;
}

And its a ASP.NET GridView with a template field as mentioned below:











When I place few breakpoints in the code, I see that the ._fnDraw() being called fnStandingReDraw() function is drawing the datatable and the setting the standing page as page 2 but after the fnDraw() is completed.....somehow fnSort() is being executed. I mean fnSort() is being called from somewhere and its overwriting the IDisplayStart to 0. not sure why fnSort() is getting executed at the end.

Can someonw help me on this ?