Jquery 数据表字符串过滤器

Question

下面的代码工作正常并获取所有数据。我想在数据表（sample_container）上插入一些过滤字符串。因此，对于给定的sample_app，希望在页面加载时使用一些过滤器字符串（filter1，filter2）自动过滤sample_container数据表。有什么想法吗？

 $("#sample_container").html("<h2>Sample libs</h2>");
 $.ajax({
            type: "GET",
            url: "some_url",
            data: some_data,
            dataType: 'jsonp',
            crossDomain: true,
            async: false,
            success: function(response) {
                $("#sample_container").html("<h2>Sample Libraries</h2>");
                html = "<table class='datatable'>";
                blah blah
                }
                html += "</table>";
                $("#sample_container").append(html);
                $("#sample_container .datatable").dataTable({ "bPaginate": false,
                                                           "bAutoWidth": false,
                                                           "bFilter": false,
                                                           "bInfo": false
                }).columnFilter({ sPlaceHolder: "head:after",
                                  aoColumns: [ { type: "text" },
                                               { type: "text" },
                                               { type: "text" }
                                  ]
                });
            },

        });


 {% if sample_app %}
    <h1>{{ sample_app.id }}  - {{ sample_app.name }}</h1>
    <br/>
    blah blah...
 {% endif %}

Answer 1

在服务器端实现 DataTables 不仅速度更快，而且更直接。本质上，您将整个表绘制到 dom，然后完全重写它......这是非常低效的，并且在变得笨重之前可能无法处理超过数百行的数据。

数据表，通过“服务器端”查询完成：

$('#marketinghistory').dataTable( {     
            "bDestroy":true,
            "aaSorting": [[ 0, "desc" ]], 
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "url of ajax source",
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bAutoWidth": false,
            "bFilter":false,
            "bLengthChange": true,
            "bPaginate": true,
            "bSort": true,
            "iDisplayLength": 15,
            "bInfo": true,
            "aoColumns": [
                  { "sTitle": "column title", "sWidth": "5%", "sClass":"center" },
                  { "sTitle": "column title", "sWidth": "25%" , "sClass":"center"},
                  { "sTitle": "column title", "sWidth": "10%", "sClass":"center" },
                  { "sTitle": "column title", "sWidth": "5%", "sClass":"center" }
            ]
        });

现在，对于过滤，您有一些选项。如果您提前知道要做什么，则可以将它们作为“数据”字段中的变量传递，然后在服务器上进行排序。但是，您可能希望它是可变的......在这种情况下还有更多的圈。

将此代码块添加到上面的数据表代码中将允许您执行变量过滤器：

"fnServerData": function ( sSource, aoData, fnCallback ) {
                var name = $('#namesearch').val();
                var phone = $('#phonesearch').val();
                var company = $('#companysearch').val();

                aoData.push({ "name": "name", "value": name },
                            { "name": "phone", "value": phone },
                            { "name": "company", "value": company }
                );

                $.ajax( {
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                } );
            }

因此，变量被设置为页面上可用于根据用户输入进行过滤的输入字段的值。 aodata.push 设置要在回调中推回的数据，并由 ajax 回调完成这项工作。我在高级搜索页面上使用此模式，搜索字段位于左侧，数据表位于右侧。最初，对于空白字段，没有搜索过滤器，但随着值的填充和表格的重新绘制，服务器可以过滤查询。

当然，这需要一个相当简单的后端设置来方便查询。 对此的说明在这里。