2016-01-14 2 views
-1

В моем проекте MVC у меня реализованы данные JQuery для получения данных. Я использую 1.9.4 jquery.dataTables.js. У меня есть три фильтра, чтобы ограничить вывод в таблице. Два из них прекрасно работают. Однако на третьем варианте, который предположил бы показать все записи, я получаю всплывающее предупреждение «Undefined». Я пробовал как в IE, так и в Google Chrome.JQuery table undefined error

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 (short для columnsDefinitions).

Помните, что вы будете получать ошибки, аналогичные сообщенным, если набор данных не соответствует столбцам. Убедитесь, что каждый вложенный массив в массиве данных имеет такое же количество значений, что и для столбцов, прочитайте комментарии для получения более подробной информации. если по какой-либо причине ваши данные не совпадают с этим заказом, вам придется вручную изменить этот порядок, запустив пустые значения с значениями «-» или «n/a», чтобы все вложенные массивы имели одинаковую логику значений.

Надеюсь, это поможет. Удачи.