Question

我正在使用带有服务器端处理的Datatables插件。我的桌子是按下按钮启动的。我想在实际初始化时对表上的几列应用过滤器。我尝试使用searchCols，但没有结果。我的代码如下：

var table = dataTables.create("#projectTable", parameters, {
                        ajax: {
                            url: 'project/search.do',
                            data: function(d) {
                                d.numberOfColumns = 6
                                d.startDate = jQuery("#start").val(),
                                d.endDate = jQuery("#end").val()                            
                            },
                            dataSrc: "rows",
                            type: 'GET'
                        },
                        columns: getColumns(),
                        "columnDefs": getColumnDefs(),                          
                        searchCols: [
                                       null,
                                       { sSearch: jQuery("#selectBox1").val() },                                       
                                       { sSearch: jQuery("#selectBox2").val() },
                                       null,
                                       null,
                                       null
                                     ]
                    });
                }

目前，我正在使用column.search.draw()，这会使表再次加载，从而破坏我的应用程序的性能。任何帮助表示赞赏！

Answer 1

我的表定义放在要在多个选项卡中的多个表上使用的函数中，如下所示。一些更无关紧要的代码已被删除。

  ClientInterface.getDataTableDefinition = function (me) {


        var wspath = getBasePath("ws/wsClient.asmx/GetClientInterfaceLabels");

        var options = {

            sorting: false,
            paging: false,
            searching: false,
            language:{emptyTable: 'Select a Fiscal year and Activity then click "Go"'},
            columnDefs: [{
                targets: [1, 2], render: function (data, type, full, meta) {
                    // Make the html table editable
                    return "<div contenteditable='true'>" + data + "</div>"
                }
            }],

            select: false,
            dom: 'lfrtB',
            columns: [{ 'data': 'DefaultLabel' },
                { 'data': 'AssignedLabel' },
                { 'data': 'ToolTip' }],

            serverSide: true,
            ajax: {
                url: wspath,
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: function (ssp) {
                    // button click is used to verify something has been selected so it
                    // is blindly fetched here.
                    var actid = $("#ddlActivity").val();
                    var fy = $("#ddlFiscalYear").val();
                    me.lastLabelFetch = { ActId: actid, FiscalYear: fy };
                    return JSON.stringify({ ActId: actid, FiscalYear: fy });
                },
                error: function (response) { onAjaxError(response) },
                dataFilter: function (data) {

                    // the web method returns the data in a wrapper 
                    // so it has to be pulled out and put in the 
                    // form that DataTables is expecting.
                    var p = JSON.parse(data);
                    // set tr id based on row id and tab number.
                    //  $.map(p.d.data, function (val, i) { val.trid = prepend + val.rowId; });
                    var d = JSON.parse(p.d);
                    //  me._$tblMyDataTable.select.style(p.d.length > 0);
                    return JSON.stringify({ data: d });
                }
            },
            // Data Table is not loaded until the user selects Activity and Fiscal Year.
            deferLoading: 0,

            initComplete: function () {

            }

        }
        return options;
    };

这是我的事件处理程序。它确保selectbox中的两个值有效。如果是，则触发数据表加载。

    ClientInterfaceLabels.prototype.onBtnGoClicked = function () {

        var me = this;
        var activityId = $("#ddlActivity").val();
        var fiscalYear = $("#ddlFiscalYear").val();


        var msg = "";
        // validate inputs and show modal message if missing

        if (activityId == "0") { msg += "<h3>Activity.</h3>"; };
        if (fiscalYear == "0") { msg += "<h3>Fiscal year.</h3>"; };

        if (msg.length > 0) {
            msg = "<h2>Please provide the following:</h2>" + msg;
            clientBased.alert({ message: msg });
            return;
        }   
        this._$tblDataTableLables.ajax.reload();

    };

实际的表格，按钮和选择框初始化：

    ClientInterfaceLabels.prototype.initialize= function () {

        var me = this;

        $("#ButtonGo").button().click(function () { me.onBtnGoClicked(); });
        $("#ddlFiscalYear").select2();
        $("#ddlActivity").select2();

        this._$tblHtmlLabels = $("#tblLabels");
        this._$tblDataTableLables = this._$tblHtmlLabels.DataTable(ClientInterfaceLabels.getDataTableDefinition(me));
    }

Answer 2

您可以在按钮处理程序中执行另外一项可能有帮助的事情：

$("#btnGo").on("click", function() {
     if($.fn.dataTable.isDataTable("#tbl")) {
         $("#tbl").DataTable().ajax.reload();
     }
     else {
          $("#tbl").DataTable(tableDef);
     }

 } )

jQuery Datatables过滤表初始化

2 个答案: