jquery datatable generation on custom query
I have been scratching my head on this, I have been using jquery datatable http://www.datatables.net to display records from database.
I have been using the inbuilt search field, but its a single field.
I want to do a report type search , for e.g. displaying all orders between a given start and end date, ordered by whom, factory to which the order was assigned etc. I want to display table, based on multiple inputs which can be used for building the query for generating the report.
So, what I was thinking is to have form with few form fields, when I input the search parameters in the search field and the table redraws according to the result returned.
I was wondering how to send data from the form fields so that the query is generated and response is returned and the table is redrawn.
below is a sample of code I have been using
` /Initialize the data table/
$('#second_tab_table').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "components/report/report_processing.php?status=displayOrderReport",
"bJQueryUI": true,
"bStateSave": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers"
} );`
I also had a look at the custom filtering http://www.datatables.net/examples/plug-ins/range_filtering.html, but this does not serve the purpose.
I would greatly appreciate any help on this.
Solved it this way :
` $(document).ready(function() {
/*Initialize the data table*/
$('#second_tab_table2').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "components/report/report_processing.php?status=displayOrderReport&sid=<?php echo $_REQUEST['sid']; ?>",
"bJQueryUI": true,
"bStateSave": true,
"bAutoWidth": false,
"sPaginationType": "full_numbers"
} );
$("#oc_id").live("change", function() {
var data = $("#formulario_personal").serialize();
var dataString = 'oc_id=8&status=displayOrderReport&'+ data;
开发者_StackOverflow社区 $.ajax({
type: "POST",
url: "components/report/report_processing.php",
data: dataString,
cache:false,
success: function(html){;
var oTable = $('#second_tab_table').dataTable();
oTable.fnDraw();
}
});
});
});`
Seems this will work: http://www.datatables.net/examples/server_side/custom_vars.html
The correct way is to override fnServerData
or fnServerParams
.
This is version dependent though - so you need to make sure you are on the correct version. I think fnServerData
supports older versions better. so I will show examples about it.
This function is well documented. Here is a usage example.
From their example, look at how they add data to the query with aoData.push
statement.
I am using it, and it works well for me. So if you have more problems, please let me know.
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
aoData.push( { "name": "more_data", "value": "my_value" } );
$.getJSON( sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json)
} );
}
} );
} );
精彩评论