ASP.NET (not MVC) processing problem
ASP.NET (not MVC) processing problem
Sly777
Posts: 5Questions: 0Answers: 0
Hi guys,
Firstly my english is not very good. So im sorry if i write wrong :) I used datatables on my all project and i love it. BUT today i found a problem. I used it on asp.net. Everything works. But if i try sorting or searching, json loaded and processing div freezed. Page or browser or operating system is working but nothing changed on page. It works first load but other calls are not change anything. i tried on CLASSIC ASP. it works.
Thanks.
[code]
Title
Agenda ID
Finish Date
[/code]
[code]
var oTable;
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;
var id = aData[2];
var sOut = '';
sOut += 'Rendering engine:'+aData[2]+' '+aData[5]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
return sOut;
}
$(document).ready(function () {
var nocache = Math.random();
oTable = $('#TABLETOCONTROL').dataTable({
"sPaginationType": "full_numbers",
"aaSorting": [[3,'desc']],
"aoColumns": [
{ "bSortable": false },
null,
{ "bVisible": 0 },
null
],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Subjectsjson.aspx?_="+Math.random()+"&PageStatus=<%=Status%>",
"fnDrawCallback": fnOpenClose
});
$("#TABLETOCONTROL thead tr th:eq(0)").css({"width":"16px"});
$("#TABLETOCONTROL thead tr th:eq(1)").css({"width":"400px"});
$("#TABLETOCONTROL thead tr th:eq(2)").css({"width":"2px"});
$("#TABLETOCONTROL thead tr th:eq(3)").css({"width":"250px"});
});
/* Event handler function */
function fnOpenClose ( oSettings )
{
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "images/details_open.png";
/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );
}
else
{
/* Open this row */
this.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
}
[/code]
Firstly my english is not very good. So im sorry if i write wrong :) I used datatables on my all project and i love it. BUT today i found a problem. I used it on asp.net. Everything works. But if i try sorting or searching, json loaded and processing div freezed. Page or browser or operating system is working but nothing changed on page. It works first load but other calls are not change anything. i tried on CLASSIC ASP. it works.
Thanks.
[code]
Title
Agenda ID
Finish Date
[/code]
[code]
var oTable;
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;
var id = aData[2];
var sOut = '';
sOut += 'Rendering engine:'+aData[2]+' '+aData[5]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
return sOut;
}
$(document).ready(function () {
var nocache = Math.random();
oTable = $('#TABLETOCONTROL').dataTable({
"sPaginationType": "full_numbers",
"aaSorting": [[3,'desc']],
"aoColumns": [
{ "bSortable": false },
null,
{ "bVisible": 0 },
null
],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "Subjectsjson.aspx?_="+Math.random()+"&PageStatus=<%=Status%>",
"fnDrawCallback": fnOpenClose
});
$("#TABLETOCONTROL thead tr th:eq(0)").css({"width":"16px"});
$("#TABLETOCONTROL thead tr th:eq(1)").css({"width":"400px"});
$("#TABLETOCONTROL thead tr th:eq(2)").css({"width":"2px"});
$("#TABLETOCONTROL thead tr th:eq(3)").css({"width":"250px"});
});
/* Event handler function */
function fnOpenClose ( oSettings )
{
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "images/details_open.png";
/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );
}
else
{
/* Open this row */
this.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
}
[/code]
This discussion has been closed.
Replies
Things to try:
1. Make sure you are using DataTables 1.5.6
2. Validate your json return from the server using http://jsonlint.com
3. Does this occur in all browsers over multiple platforms?
Regards,
Allan
1. Im using version 1.5.6.
2. I checked it and page said "Valid JSON". I tested 3 json response on jsonlint.com.
[code]
{"sEcho":"1","iTotalRecords":"4","iTotalDisplayRecords":"4","aaData":[["Test One","312","46","12/28/2009"],["Test Two","310","46","12/30/2009"],["Test Three","309","46","12/30/2009"],["Test Subject","308","46","12/30/2009"]]}
[/code]
[code]
{"sEcho":"1","iTotalRecords":"4","iTotalDisplayRecords":"4","aaData":[["Test One","312","46","12/28/2009"],["Test Three","309","46","12/30/2009"],["Test Two","310","46","12/30/2009"],["Test Subject","308","46","12/30/2009"]]}
[/code]
[code]
{"sEcho":"1","iTotalRecords":"4","iTotalDisplayRecords":"4","aaData":[["Test Subject","308","46","12/30/2009"],["Test Two","310","46","12/30/2009"],["Test Three","309","46","12/30/2009"],["Test One","312","46","12/28/2009"]]}
[/code]
And datatables works on first page load. After sorting or searching, it freezes. Firebug doesnt give any error.
3. Yes. I tried on internet explorer 7, Firefox 3.5.6, Google Chrome 4.0.249.43.
Did you check what the json response was after doing a filter/sort? Does the server-side return what you are expecting?
Any chance of posting a link so we can see what is going on?
Thanks,
Allan
I checked after filter and sort. Server-side returns true values. But Datatables freezes after sort/search.
First Load :
[code]{"sEcho":"1","iTotalRecords":"4","iTotalDisplayRecords":"4","aaData":[["Test One","312","46","12/28/2009"],["Test Two","310","46","12/30/2009"],["Test Three","309","46","12/30/2009"],["Test Subject","308","46","12/30/2009"]]}[/code]
Sorting 1:
[code]{"sEcho":"1","iTotalRecords":"4","iTotalDisplayRecords":"4","aaData":[["Test One","312","46","12/28/2009"],["Test Three","309","46","12/30/2009"],["Test Two","310","46","12/30/2009"],["Test Subject","308","46","12/30/2009"]]}[/code]
Sorting 2:
[code]{"sEcho":"1","iTotalRecords":"4","iTotalDisplayRecords":"4","aaData":[["Test Subject","308","46","12/30/2009"],["Test Two","310","46","12/30/2009"],["Test Three","309","46","12/30/2009"],["Test One","312","46","12/28/2009"]]}[/code]
Your sEcho is the same for each response... It should be incrementing by one each time. This would suggest that you aren't outputting the 'sEcho' variable that is sent from DataTables, but rather just returning '1'. If you return what DataTables sends, then it should work fine.
Regards,
Allan
It works!
You are the best :)