Jquery表未定义错误

Question

在我的 MVC 项目中，我实现了 JQuery 数据表来检索数据。我使用的是 1.9.4 jquery.dataTables.js。我有三个过滤器来限制表中的输出。其中两个完美运行。但是，在第三个选项中，它假设显示所有记录，我收到“未定义”弹出警报。我在 IE 和 Google chrome 中都试过了。

@{
    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>

Answer 1

好的，请考虑为您的 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', 'productName';调整它以适合您将值添加到列数组的问题，您想要添加到列的任何额外配置都必须将其添加到 columnDefs（columnDefinitions 的缩写）。

请记住，如果数据集与列不匹配，您将不断收到与报告的错误类似的错误。确保数据数组中的每个嵌套数组具有与列相同数量的值，请阅读 cmets 了解更多详细信息。如果出于任何原因，您的数据与该顺序不匹配，您将不得不手动更改该顺序，使用“-”或“n/a”值强制空值，以便所有嵌套数组具有相同的值逻辑。

我希望这会有所帮助。 祝你好运。