2016-01-14 138 views
-1

在我的MVC項目中,我已經實現了JQuery數據表來檢索數據。我正在使用1.9.4 jquery.dataTables.js。我有三個過濾器來限制表中的輸出。其中兩個完美的作品。然而,在第三個選項中,假設顯示我收到的所有記錄「未定義」彈出警報。我在IE和Google chrome上都嘗試過。Jquery表未定義錯誤

enter image description here

@{ 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
    ViewBag.Title = "Call log"; 
} 
<link rel="stylesheet" href="~/Scripts/datatables/css/jquery.dataTables.css" /> 
<script type="text/javascript" src="~/Scripts/datatables/JS/jquery.js"></script> 
<script type="text/javascript" src="~/Scripts/datatables/JS/jquery.dataTables.js"></script> 
<script src="~/Scripts/jquery-ui.min.js"></script> 
<script src="~/Scripts/json2.js"></script> 
<script src="~/Scripts/json2.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     GetUsers(1); 
     $('#select-filter').change(function() { 
      GetUsers($(this).val()); 
     }); 
    }); 
function GetUsers(filter) { 
     $.ajax({ 
      url: '/home/GetAllUsers', 
      type: "POST", 
      cache: false, 
      data: JSON.stringify({ filter: filter }), 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      success: function (idata) { 
       DisplayDataTables(idata.aaData); 
       return; 
      }, 
      error: function (idata) { 
       alert(idata.msg); 
      } 
     }); 
    } 

    function DisplayDataTables(aDataSet) { 
     $('#divBRUsers').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tbl-users"></table>'); 
     $('#tbl-users').DataTable({ 
      "sPaginationType": "full_numbers", 
      "aaData": aDataSet, 
      "aoColumns": [ 
       { 
        "sTitle": "Customer ID", 
        "sClass": "center", 
        "sName": "Employee ID", 
        "fnRender": function (oObj) { 
         return '<a href="/home/logdetails?cifid=' + oObj.aData[0] + '" title="' + oObj.aData[0] + '">' + oObj.aData[0] + '</a>'; 
        } 
       }, 
       { "sTitle": "Customer Name", "sClass": "left" }, 
       { "sTitle": "Customer Address", "sClass": "left" }, 
       { "sTitle": "Customer City", "sClass": "left" }, 
       { "sTitle": "Contacted Before", "sClass": "left" } 
       //{ "sTitle": "Campaign Name", "sClass": "center" } 
      ] 
     }); 
    } 
</script> 
<h2>@ViewBag.Title.</h2> 
<div class="row"> 
    <div class="div-add-campaign-form"> 
     Filter <select class="dtSearch" id="select-filter"> 
      <option value="1">Assigned to me</option> 
      <option value="2">Associated with my branch</option> 
      <option value="3">View all</option> 
     </select> 
    </div> 
    <div id="divBRUsers"> 
     Please wait, loading data... 
    </div> 
</div> 
+0

尋求調試幫助的問題(「爲什麼這個代碼不工作?」)必須包含所需的行爲,特定的問題或錯誤以及在問題本身中重現問題所需的最短代碼。沒有明確問題陳述的問題對其他讀者無益。請參閱:[如何創建最小,完整和可驗證示例](http://stackoverflow.com/help/mcve)。 – Andreas

+0

Andreas I更新了帖子,讓我知道這是否有效。 –

回答

0

好吧,考慮下面的對象爲您的jQuery dataTable的實例:

var conf = { 
    columnDefs : [ { className : '...' }, targets : { 3, 6, 7} ], 
    columns: [ 
    [ title : 'product id' ], 
    [ title : 'product name' ] 
    ], 
    data : [ 
    [ 23, "Cellular" ] // nested array, pay attention to the number of values added, 2 values, by order: productId, productName 
    ], 
    order: [[0,'desc']], // first column set to desc, add a new value in the array to apply multi-order, values order matters!! 
    destroy : !0, 
    pageLength : 10, 
    paging : !0, // full number pagination is set as default 
    responsive : !0, 
    bSort : !0, 
    bSortable : !0, 
    bFilter : !1, 
    autoWidth : !1 
}; 

正如你所看到的,只是對象定義的表顯然是2列 '的productId' , '產品名稱';爲了適應您的情況,將其調整爲將數組添加到列數組的問題,將要添加到列的任何額外配置都必須添加到columnDefs(columnDefinitions的簡寫)中。

請記住,如果數據集與列不匹配,您將繼續收到與報告類似的錯誤。確保數據數組中的每個嵌套數組具有與列相同數量的值,請閱讀註釋以獲取更多詳細信息。如果出於任何原因,您的數據與該順序不匹配,您必須手動更改該順序,強制使用' - '或'n/a'值填充空值,以便所有嵌套數組具有相同的值邏輯。

我希望這會有所幫助。 祝你好運。