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!
<script type="text/javascript" charset="utf-8">
var oTable;
/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '<table cellpadding="12" cellspacing="0" border="0" style="padding-left:50px;">';
// sOut += '<tr><td>Feld 0:</td><td>'+aData[0]+'</td></tr>';
sOut += '<tr><td>Feld 1:</td><td>'+aData[1]+'</td></tr>';
sOut += '<tr><td>Feld 2:</td><td>'+aData[2]+'</td></tr>';
sOut += '<tr><td>Feld 3:</td><td>'+aData[3]+'</td></tr>';
sOut += '<tr><td>Feld 4:</td><td>'+aData[4]+'</td></tr>';
sOut += '<tr><td>Feld 5:</td><td>'+aData[5]+'</td></tr>';
sOut += '<tr><td>Feld 6:</td><td>'+aData[6]+'</td></tr>';
sOut += '<tr><td>Feld 7:</td><td>'+aData[7]+'</td></tr>';
sOut += '<tr><td>Feld 8:</td><td>'+aData[8]+'</td></tr>';
sOut += '<tr><td>Feld 9:</td><td>'+aData[9]+'</td></tr>';
sOut += '<tr><td>Feld 10:</td><td>'+aData[10]+'</td></tr>';
sOut += '<tr><td>Feld 11:</td><td>'+aData[11]+'</td></tr>';
sOut += '<tr><td>Feld 12:</td><td>'+aData[12]+'</td></tr>';
sOut += '<tr><td>Feld 13:</td><td>'+aData[13]+'</td></tr>';
sOut += '<tr><td>Feld 14:</td><td>'+aData[14]+'</td></tr>';
// sOut += '<tr><td>Rendering engine:</td><td>'+aData[2]+' '+aData[5]+'</td></tr>';
// sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
// sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
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": " <b>Spalten wählen</b> ",
"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 );
}
</script>