Number of entries in 'li' - list form (on Datatable) - list

Question

I am totally new here, I will try to explain. On each data table header we have show entries, were we have options something like 10,20,30... This is normally displayed in select options, Insted i want it to be in List in ul li.

Answer 1

You need to modify jquery.dataTables.js file, refer below code which create menu item for length:- (Please note, this is code from jquery.dataTables.js file and you need to modify according to convert select option dropdown to ul li list)
/* This can be overruled by not using the _MENU_ var/macro in the language variable */
var sName = 'name="'+oSettings.sTableId+'_length"';
var sStdMenu = '<select size="1" '+sName+'>';
var i, iLen;
var aLengthMenu = oSettings.aLengthMenu;
if ( aLengthMenu.length == 2 && typeof aLengthMenu[0] === 'object' &&
typeof aLengthMenu[1] === 'object' )
{
for ( i=0, iLen=aLengthMenu[0].length ; i<iLen ; i++ )
{
sStdMenu += '<option value="'+aLengthMenu[0][i]+'">'+aLengthMenu[1][i]+'</option>';
}
}
else
{
for ( i=0, iLen=aLengthMenu.length ; i<iLen ; i++ )
{
sStdMenu += '<option value="'+aLengthMenu[i]+'">'+aLengthMenu[i]+'</option>';
}
}
sStdMenu += '</select>';
var nLength = document.createElement( 'div' );
if ( !oSettings.aanFeatures.l )
{
nLength.id = oSettings.sTableId+'_length';
}
nLength.className = oSettings.oClasses.sLength;
nLength.innerHTML = '<label>'+oSettings.oLanguage.sLengthMenu.replace( '_MENU_', sStdMenu )+'</label>';
/*
* Set the length to the current display length - thanks to Andrea Pavlovic for this fix,
* and Stefan Skopnik for fixing the fix!
*/
$('select option[value="'+oSettings._iDisplayLength+'"]', nLength).attr("selected", true);
$('select', nLength).bind( 'change.DT', function(e) {
var iVal = $(this).val();
/* Update all other length options for the new display */
var n = oSettings.aanFeatures.l;
for ( i=0, iLen=n.length ; i<iLen ; i++ )
{
if ( n[i] != this.parentNode )
{
$('select', n[i]).val( iVal );
}
}
/* Redraw the table */
oSettings._iDisplayLength = parseInt(iVal, 10);
_fnCalculateEnd( oSettings );
/* If we have space to show extra rows (backing up from the end point - then do so */
if ( oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay() )
{
oSettings._iDisplayStart = oSettings.fnDisplayEnd() - oSettings._iDisplayLength;
if ( oSettings._iDisplayStart < 0 )
{
oSettings._iDisplayStart = 0;
}
}
if ( oSettings._iDisplayLength == -1 )
{
oSettings._iDisplayStart = 0;
}
_fnDraw( oSettings );
} );