Question

我正面临Datatable的问题。

<table id="example1" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <c:forEach items="${Details.columns}" var="column">
                                                <th>${column.columnTitle}</th>
                                            </c:forEach>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                            <c:forEach items="${Details.columns}" var="column">
                                                <th></th>
                                            </c:forEach>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <c:forEach items="${Details.callList}" var="call">
                                            <tr>
                                                <c:forEach items="${call.attributes}" var="attribute">
                                                    <td>${attribute.value}</td>
                                                </c:forEach>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
$("#example1").dataTable({
            'sDom': '"top"i',
            //"aoColumnDefs": [{ "bSearchable": true, "aTargets": [1] }],
            "bPaginate" : true,
            "bLengthChange" : false,
            //"bFilter" : true,
            "bSearchable": true,
            "bSort" : true,
            "bInfo" : true,
            "bAutoWidth" : false,
            "iDisplayLength": 5 
            //}).columnFilter({"aoColumns": [{ "type": "text" }, { "type": "text" }, null]});
        }).columnFilter({"aoColumnDefs": [{ "bSearchable": true, "aTargets": [2] }]});

从上面的代码片段中...我正在尝试删除过滤器/单独搜索最后一列。

这里＆＃34; aoColumns＆＃34;按预期工作 - 它删除了我编码的最后一列中的过滤器，但是我无法使用＆＃34; aoColumns＆＃34; 。由于此表中的列是动态/可配置的，因此每次更改代码都很困难。

如果有人能帮助我，真的很感激..

谢谢，

Answer 1

这就是我使用Datatables的方式，它就像一个魅力。我不在客户端进行排序，我在服务器端使用AJAX进行排序，但除了“bServerSide = true”之外，表的配置应该相同。如果这可以解决您的问题，请告诉我：

 var oTable = $('#tblMainTable').dataTable({
        "searching": false,
        "bStateSave": true,
        "fnStateSave": function (oSettings, oData) {
            localStorage.setItem('jobTitlesDataTables', JSON.stringify(oData));
        },
        "fnStateLoad": function (oSettings) {
            return JSON.parse(localStorage.getItem('jobTitlesDataTables'));
        },
        "pagingType": "full_numbers",
        "bLengthChange": false,
        "bAutoWidth": false,
        "iDisplayLength": 2000,
        "bServerSide": true, // server side 
        "sAjaxSource": BASE_URL + "Job/GetJobTitleMappingDTOs", // AJAX URL
        "bProcessing": true,
        "fnServerData": function (sSource, aoData, fnCallback, oSettings) {
// send data from client-side to server-side
            aoData.push({ "name": "IsMapped", "value": $("#bdgIsMapped").data("selected") });
            aoData.push({ "name": "IsSearchableOption", "value": $("#bdgIsSearchable").data("selected") });
            aoData.push({ "name": "timestamp", "value": new Date().getTime() }); // Added to avoid caching in some IE versions.

            oSettings.jqXHR = $.ajax({
                "dataType": 'json',
                "type": "GET",
                "url": sSource,
                "data": aoData,
                "cache": false,
                "success": function (json) {
                    // shows records count next to the top title
                    if (json.iTotalRecords > 0) {
                        $("#resultsDescription").text(" - " + json.iTotalRecords + " rows.");
                    }
                    else {
                        $("#resultsDescription").text(" - No results.");
                    }
                    // shows paginator when necessary
                    if (json.iTotalRecords > json.iDisplayLength) {
                        $(".dataTables_paginate").show();
                    }
                    else {
                        $(".dataTables_paginate").hide();
                    }
                    $("#isFirstSearch").val("false");

                    fnCallback(json);
                }
            });
        },
        "aoColumnDefs": [
        {
            sType: "numeric",
            mData: "RowNumber",
            aTargets: [0],
            mRender: function (data, type, full) {
// this is for custom rendering a column just in case you need it
                // 'full' is the row's data object, and 'data' is this column's data
                return '<span class="RowNumber">' + full.RowNumber + '</span>';
            }
        },
        {
            sType: "numeric",
            mData: "JobTitleId",
            aTargets: [1],
            mRender: function (data, type, full) {
                // 'full' is the row's data object, and 'data' is this column's data
                return '<span class="EditableJobTitleId" data-job-title-id="' + full.JobTitleId + '">' + full.JobTitleId + '</span>';
            }
        },
        {
            sType: "string",
            mData: "JobTitle",
            aTargets: [2]
        }
],
        "order": [[1, "asc"]] 
    });

数据表aoColumnDefs未按预期工作

1 个答案: