Sort not working with server side processing and question how to prefilter
Sort not working with server side processing and question how to prefilter

Hello,
I'm trying to rebuild an existing result list with the help of DataTables. It looks amazing and I think there is only a small problem but I have problems to solve it myself. So I would like to ask you for help. Thanks in advance ;)
Please have a look at my example: http://bit.ly/1aHUi98
First problem: When I click the columns to sort, it will not work. Also the default sort is not working.
Second problem: I would like to know how I can prefilter (with the help of $_POST) the content, so that only records with the matching ak = "AK30" will be displayed.
Thanks!
[code]
var oTable;
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
// sOut += 'Feld 0:'+aData[0]+'';
sOut += 'Feld 1:'+aData[1]+'';
sOut += 'Feld 2:'+aData[2]+'';
sOut += 'Feld 3:'+aData[3]+'';
sOut += 'Feld 4:'+aData[4]+'';
sOut += 'Feld 5:'+aData[5]+'';
sOut += 'Feld 6:'+aData[6]+'';
sOut += 'Feld 7:'+aData[7]+'';
sOut += 'Feld 8:'+aData[8]+'';
sOut += 'Feld 9:'+aData[9]+'';
sOut += 'Feld 10:'+aData[10]+'';
sOut += 'Feld 11:'+aData[11]+'';
sOut += 'Feld 12:'+aData[12]+'';
sOut += 'Feld 13:'+aData[13]+'';
sOut += 'Feld 14:'+aData[14]+'';
// 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() {
oTable = $('#example').dataTable( {
// "sDom": 'T<"clear spacer"><"H"TCfr>t<"F"ip>',
// "sDom": 'T<"clear spacer"><"H"Cfr>t<"F"ip>',
"sDom": 'Tf<"clear spacer"><"H"lCr>t<"F"ip>',
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing_detail.php",
"aoColumns": [
{ "sClass": "center", "bSortable": false },
{ "sClass": "center" },
{ "sClass": "center" },
null,
null,
{ "bVisible": false },
null,
null,
null,
null,
null,
null,
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false }
],
"aaSorting": [[1, 'asc']],
"sPaginationType": "full_numbers",
"oColVis": {
"buttonText": " Spalten wählen ",
"bRestore": true,
"sRestore": " zurücksetzen ",
"aiExclude": [ 0, 1, 2, 3, 4 ]
},
"oTableTools": {
"aButtons": [
{
"sExtends": "xls",
"sButtonText": "Als CSV speichern"
},
{
"sExtends": "print",
"sButtonText": "Druckansicht"
}
]
},
"oLanguage":
{
"sProcessing": "Bitte warten...",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sZeroRecords": "Keine Einträge vorhanden.",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sSearch": "Suchen",
"sUrl": "",
"oPaginate": {
"sFirst": "Erste",
"sPrevious": "Zurück",
"sNext": "Nächste",
"sLast": "Letzte"
}
}
} );
$('#example tbody td img').live( 'click', function ()
{
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "media/images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "media/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
/*
Funktion um Spalten per Link einzublenden
*/
function fnShowHide( iCol )
{
var oTable = $('#example').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
[/code]
I'm trying to rebuild an existing result list with the help of DataTables. It looks amazing and I think there is only a small problem but I have problems to solve it myself. So I would like to ask you for help. Thanks in advance ;)
Please have a look at my example: http://bit.ly/1aHUi98
First problem: When I click the columns to sort, it will not work. Also the default sort is not working.
Second problem: I would like to know how I can prefilter (with the help of $_POST) the content, so that only records with the matching ak = "AK30" will be displayed.
Thanks!
[code]
var oTable;
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
// sOut += 'Feld 0:'+aData[0]+'';
sOut += 'Feld 1:'+aData[1]+'';
sOut += 'Feld 2:'+aData[2]+'';
sOut += 'Feld 3:'+aData[3]+'';
sOut += 'Feld 4:'+aData[4]+'';
sOut += 'Feld 5:'+aData[5]+'';
sOut += 'Feld 6:'+aData[6]+'';
sOut += 'Feld 7:'+aData[7]+'';
sOut += 'Feld 8:'+aData[8]+'';
sOut += 'Feld 9:'+aData[9]+'';
sOut += 'Feld 10:'+aData[10]+'';
sOut += 'Feld 11:'+aData[11]+'';
sOut += 'Feld 12:'+aData[12]+'';
sOut += 'Feld 13:'+aData[13]+'';
sOut += 'Feld 14:'+aData[14]+'';
// 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() {
oTable = $('#example').dataTable( {
// "sDom": 'T<"clear spacer"><"H"TCfr>t<"F"ip>',
// "sDom": 'T<"clear spacer"><"H"Cfr>t<"F"ip>',
"sDom": 'Tf<"clear spacer"><"H"lCr>t<"F"ip>',
"bJQueryUI": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing_detail.php",
"aoColumns": [
{ "sClass": "center", "bSortable": false },
{ "sClass": "center" },
{ "sClass": "center" },
null,
null,
{ "bVisible": false },
null,
null,
null,
null,
null,
null,
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false },
{ "bVisible": false }
],
"aaSorting": [[1, 'asc']],
"sPaginationType": "full_numbers",
"oColVis": {
"buttonText": " Spalten wählen ",
"bRestore": true,
"sRestore": " zurücksetzen ",
"aiExclude": [ 0, 1, 2, 3, 4 ]
},
"oTableTools": {
"aButtons": [
{
"sExtends": "xls",
"sButtonText": "Als CSV speichern"
},
{
"sExtends": "print",
"sButtonText": "Druckansicht"
}
]
},
"oLanguage":
{
"sProcessing": "Bitte warten...",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sZeroRecords": "Keine Einträge vorhanden.",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sSearch": "Suchen",
"sUrl": "",
"oPaginate": {
"sFirst": "Erste",
"sPrevious": "Zurück",
"sNext": "Nächste",
"sLast": "Letzte"
}
}
} );
$('#example tbody td img').live( 'click', function ()
{
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
/* This row is already open - close it */
this.src = "media/images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "media/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
/*
Funktion um Spalten per Link einzublenden
*/
function fnShowHide( iCol )
{
var oTable = $('#example').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
[/code]
This discussion has been closed.