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回调完成工作。我在高级搜索页面上使用此模式，左侧是搜索字段，右侧是数据表。最初，对于空白字段，没有搜索过滤器，但是当填写值并重新绘制表时，服务器可以过滤查询。

当然，这需要一个相当简单的后端设置来方便查询。一个tut on that is here。

Jquery数据表字符串过滤器

1 个答案: