I am having a datatable displayed using jquery datatable from a codeigniter controller. What i wanna know is how do i send values from within the datatable back to a controller and use those values to retrieve new records from DB and then load them on again into the page.
My current code is
$(function(){
$('#tableChart').dataTable( {
// -------Function for formatting the table data elements-------
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$.each(aData, function (i, elem){
$('td:eq('+i+')', nRow).html( '<b><font color="#40A913">'+aData[i]+'</font></b>' );
})
return nRow;
},
"bAutoWidth": false,
"bProcessing": true,
"bLengthChange": false, // Remove the show list drop down button
"bInfo": false, // Remove info part under the table
"bFilter" : false, // Remove search box
"bDestroy": true, // Remove table & recreate table
"bServerSide": false,
"sAjaxSource": "<?php echo base_url(); ?>index.php/print_db_table/get_print_db_table/<?php echo $table_name; ?>",
});
});
<div class="container">
<div class="holderForTableChart">
<table width ="100%" cellpadding="5" cellspacing="0" class="display" id="tableChart">
<thead>
<tr id="tableHeadder" >
<?php
foreach($table_header as $item):
$header = $item->name;
echo '<th>'.$header.'</th>' ;
endforeach;
?>
</tr>
<tr>
<td></td>
<td>
<select id=""></select>
<select id=""></select>
</td>
<td>
<select id=""></select>
<select id=""></select>
</td>
<td>
<select id=""></select>
<select id=""></select>
</td>
<td>
<select id=""></select>
<select id=""></select>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
</ta开发者_Python百科ble>
</div>
</div>
Now when i select a min max value in any one of the select boxes it must be sent to the controller from where i can send them to a model and collect them and reload them in the view
humm... assuming this select box has id as #min_max_value your javascript code will be something like in code down below. This code will re-invoke ajax and will redraw table. On the codeigniter controller u will be able to grab this min max value as $_POST['min_max_value']
i referred to this page on fnServerData section for ur issue http://www.datatables.net/usage/callbacks
var oTable = '';
$(function(){
oTable = $('#tableChart').dataTable( {
// -------Function for formatting the table data elements-------
'fnRowCallback': function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$.each(aData, function (i, elem){
$('td:eq('+i+')', nRow).html( '<b><font color='#40A913'>'+aData[i]+'</font></b>' );
})
return nRow;
},
'bAutoWidth': false,
'bProcessing': true,
'bLengthChange': false, // Remove the show list drop down button
'bInfo': false, // Remove info part under the table
'bFilter' : false, // Remove search box
'bDestroy': true, // Remove table & recreate table
'bServerSide': false,
'sAjaxSource': '<?php echo base_url(); ?>index.php/print_db_table/get_print_db_table/<?php echo $table_name; ?>',
'fnServerData': function (url, data, callback) {
// Add new data
data.push({'name':'min_max_value', 'value':$('#min_max_value').val()});
$.ajax({
'url': url,
'data': data,
'type': 'POST',
'success': callback,
'dataType': 'json',
'cache': true
});
},
});
$('#min_max_value').change(function(){
oTable.fnDraw();
});
});
And if anyone is using 'order' parameter of ajax return type from controller function in CodeIgniter must be array of arrays) (for eg: echo json_encode($result)
in this $result must be an array of arrays) then this code can be very helpful.
var manageTable;
var base_url = "<?php echo base_url(); ?>";
$('#putselectidhere').on('change', function (e) {
// $("#abc").css("display","block");
manageTable = $('#puttableidhere').dataTable( {
'order': [],
'bAutoWidth': false,
'bProcessing': true,
'bLengthChange': false, // Remove the show list drop down button
'bInfo': false, // Remove info part under the table
'bFilter' : false, // Remove search box
'bDestroy': true, // Remove table & recreate table
'bServerSide': false,
'sAjaxSource': base_url + 'controller/controllerfunction',
'fnServerData': function (url, data, callback) {
// Add new data
data.push({'name':'putselectidhere', 'value':$('#putselectidhere').val()});
$.ajax({
'url': url,
'data': data,
'type': 'POST',
'success': callback,
'dataType': 'json',
'cache': true
});
},
});
});
精彩评论