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)
            } );
        }
    } );
} );