https://datatables.net/examples/api/row_details.html
i am working on this link,here we can show extra information.i am using this ajax method.it show only 100 records.but i have 24000 records.how can fetch all records. mycode is..paging display only 100 records.
jquery
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '
'+
''+
'| Full name: | '+
''+d[6]+' | '+
'
'+
''+
'| Extension number: | '+
''+d[7]+' | '+
'
'+
''+
'| Extra info: | '+
'And any further details here (images etc)... | '+
'
'+
'
';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "<?php echo base_url(); ?>home/user_record",
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
"columns": [
{
"class": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "adata": 0 },
{ "adata": 1 },
{ "adata": 2 },
{ "adata": 3 },
{ "adata": 4 }
],
"order": [[1, 'desc']],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
//$(nRow).css('background', '#E2E4FF')
//$('td:eq(0)', nRow).css('background', '#E2E4FF')
//$('td:eq(0)', nRow).html(''+(iDisplayIndex+1)+'')
//if(iDisplayIndex%2==0)
//{
//$colour="RED";
//}
//else
//{
//$colour="#FFFFFF";
//}
switch(aData[5]){
case '1':
//$(nRow).css('background', $colour)
//$('td:eq(0)', nRow).css('background', $colour)
$('td:eq(5)', nRow).html('
home/status/'+aData[0]+'" title="Edit"> |
ring_adminback/home/status/'+aData[0]+'" title="Block">')
//$('td', nRow).css('color','GREEN')
break;
case '0':
//$(nRow).css('background', $colour)
//$('td:eq(0)', nRow).css('background', $colour)
$('td:eq(5)', nRow).html('
home/status/'+aData[0]+'" title="Edit"> |
ring_adminback/home/status/'+aData[0]+'" title="Block">')
//$('td', nRow).css('color','GREEN')
break;
case '2':
//$(nRow).css('background', '#FFC4D3')Delete
//$('td:eq(0)', nRow).css('background', '#FFC4D3')
$('td:eq(7)', nRow).html('
admin_back/update_user_login/'+aData[0]+'" title="Edit"> |
ring_adminback/home/status/'+aData[0]+'" title="Enable">')
//$('td', nRow).css('color','Red')
break;
case '3':
//$(nRow).css('background', '#FFC4D3')Delete
//$('td:eq(0)', nRow).css('background', '#FFC4D3')
$('td:eq(7)', nRow).html('
admin_back/update_user_login/'+aData[0]+'" title="Edit"> |
ring_adminback/home/status/'+aData[0]+'" title="Enable">')
//$('td', nRow).css('color','Red')
break;
}
}
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
html code
|
Username |
Category |
Mobile |
Date |
Process |
|
Username |
Category |
Mobile |
Date |
Process |
fetched data
{"sEcho":0,"iTotalRecords":29270,"iTotalDisplayRecords":29270,"aaData":[["121","Hotel","Hotels and Restaurants","01141501234","2010-07-29 15:05:18","0","THE IMPERIAL New Delhi","luxury@theimperialindia.com"],--continue