Datatable aoColumnDefs未按預期方式工作

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] }]}); 

從上面的代碼片段..我試圖刪除過濾器/搜索最後一列獨自。

這裏「aColumns」按預期工作 - 它刪除了最後一列中的過濾器，因爲我編碼， 但是我無法使用「aoColumns」。由於此表中的列是動態/可配置的，所以我很難每次更改代碼。

這將是非常感激，如果有人能幫助我在這裏..

感謝，

Answer 1

這是我如何使用數據表和它的作品就像一個魅力。我不會在客戶端進行排序，我在服務器端使用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"]] 
    });