DataTables với Cột động

Question

Tôi đang cố gắng để làm cho một DataTable với các cột năng động sử dụng JSON nhưng vẫn gặp lỗi sau:

Uncaught TypeError: Cannot read property 'length' of undefined. 

Bất kỳ trợ giúp sẽ được đánh giá rất nhiều.

Cảm ơn !!

JS:

<link href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css"/> 

<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.js" type="text/javascript"></script> 

jQuery(document).ready(function() { 
    var dataObject = '[{"COLUMNS":[{ "sTitle": "NAME"}, { "sTitle": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]'; 

    var columns = []; 

    jQuery.each(dataObject.COLUMNS, function(i, value){ 
     var obj = { sTitle: value }; 
     columns.push(obj); 
    }); 

    jQuery('#example').dataTable({ 
     "bProcessing": true, 
     "bPaginate": true, 
     "sPaginationType": "full_numbers", 
     "aaData": dataObject.DATA, 
     "aoColumns": columns 
    }); 
}); 

HTML:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
    <tr><thead>column1</thead></tr> 
    <tbody></tbody> 
</table> 

Answer 1

Xin chào, có một số vấn đề trong mã ...

• dataObject là chuỗi, không phải là json. do đó bạn có thể tạo đối tượng json bằng cách sử dụng eval() hoặc xóa '
• tên thông số mà bạn đang truyền trong datatable là sai. bạn cần cung cấp thông số chính xác.
• Bạn đang sử dụng đối tượng json gốc làm mảng. nhưng bạn không sử dụng [] để lấy yếu tố đầu tiên của nó.
• nội dung html của bạn là bảng sai. vì bạn đang chuyển tên cột bằng cách sử dụng tập lệnh java. bạn không cần tiêu đề bảng html. lỗi độ dài thực sự xảy ra do mã html này. nếu bạn xóa html bên trong các bảng thì mã của bạn sẽ không có lỗi độ dài. nhưng vẫn còn lỗi trên tôi đã đề cập sẽ ở đó. xin vui lòng kiểm tra mã dưới đây. có thể bạn đang tìm kiếm mã này ...

jQuery(document).ready(function() { 
 
    var dataObject = eval('[{"COLUMNS":[{ "title": "NAME"}, { "title": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]'); 
 
    var columns = []; 
 
    $('#example').dataTable({ 
 
     "data": dataObject[0].DATA, 
 
     "columns": dataObject[0].COLUMNS 
 
    }); 
 
});

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
 
</table>

Answer 2

khai của bạn của DataObject là dành cho một String, không phải là một đối tượng với các thuộc tính "cột" và DỮ LIỆU - loại bỏ các '[ngay từ đầu và '] ở cuối để bạn có điều này (sẽ là một đối tượng):

var dataObject = {"COLUMNS":[{ "sTitle": "NAME"}, { "sTitle": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}; 

Answer 3

Tôi nghĩ cuộc sống sẽ dễ dàng hơn với với điều này

jQuery(document).ready(function() { 
 
    var dataObject = { 
 
    columns: [{ 
 
     title: "NAME" 
 
    }, { 
 
     title: "COUNTY" 
 
    }], 
 
    data: [ 
 
     ["John Doe", "Fresno"], 
 
     ["Billy", "Fresno"], 
 
     ["Tom", "Kern"], 
 
     ["King Smith", "Kings"] 
 
    ] 
 
    }; 
 
    var columns = []; 
 
    $('#example').dataTable({ 
 
    "data": dataObject.data, 
 
    "columns": dataObject.columns 
 
    }); 
 
});

<link href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script> 
 
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">

Answer 4

Những người nhận được một cảnh báo : yêu cầu biết lỗi được mô tả trên https://datatables.net/tn/4, làm kiểm tra định dạng dữ liệu json của bạn. Dưới đây ví dụ có thể giúp bạn.

var dataObject = eval('[{"columns":[{ "title": "Id", "data":"Id"}, { "title": "Name", "data":"Name"}],"data":[{"Id":"123","Name":"John Doe Fresno"}, {"Id":"124","Name":"Alice Alicia"}]}]');  
$('#example').DataTable(dataObject[0]); 

bản demo làm việc: https://jsfiddle.net/ue6vqy77/