自定义查询的jquery数据表生成

时间:2011-03-27 05:29:37

标签: jquery datatables

我一直在讨论这个问题,我一直在使用jquery datatable http://www.datatables.net来显示数据库中的记录。

我一直在使用内置搜索字段,但它只是一个字段。

我想进行报告类型搜索,例如显示给定开始日期和结束日期之间的所有订单,由谁,按订单分配的工厂排序等。我想显示表格,基于多个输入,可用于构建查询以生成报告。

所以,当我在搜索字段中输入搜索参数并根据返回的结果重绘表时,我想的是使用几个表单字段的表单。

我想知道如何从表单字段发送数据,以便生成查询并返回响应并重新绘制表。

下面是我一直在使用的代码示例

`/ 初始化数据表 /

        $('#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"
        } );`

我还查看了自定义过滤http://www.datatables.net/examples/plug-ins/range_filtering.html,但这不符合此目的。

我非常感谢你提供任何帮助。

解决这个问题:


`$(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;
           $.ajax({                           
                    type: "POST",
                   url: "components/report/report_processing.php",
                    data: dataString,
                    cache:false,
                    success: function(html){;
                            var oTable = $('#second_tab_table').dataTable();
                            oTable.fnDraw();
                    }
                });
        });


});`

似乎这样可行: http://www.datatables.net/examples/server_side/custom_vars.html

1 个答案:

答案 0 :(得分:0)

正确的方法是覆盖fnServerDatafnServerParams

这取决于版本 - 因此您需要确保使用的版本正确。我认为fnServerData更好地支持旧版本。所以我将展示它的例子。

此功能为well documented。这是一个usage example

从他们的示例中,了解他们如何使用aoData.push语句将数据添加到查询中。 我正在使用它,它对我很有用。所以,如果您有更多问题,请告诉我。

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