Загрузка Json объект в DataTable (AJAX)

Я хочу использовать объект JSON построить DataTable, но я получаю следующее сообщение об ошибке:Загрузка Json объект в DataTable (AJAX)

после этого, браузер показывает:

Я старался в течение нескольких часов, когда указывал URL-адрес в предупреждающем сообщении .. но я не понял.

Объект JSON извлекается сервлетом под именем MyJson. Этот JSon имеет следующее представление.

{ 
    "data":[ 
     ["NAME: Name1","DIRECTION: Salida","CHARGED: 15","AFFORDED: 15"], 
     ["NAME: Name2","DIRECTION: Salida","CHARGED: 4","AFFORDED: 4"], 
     ["NAME: Name3","DIRECTION: Entrada","CHARGED: 4","AFFORDED: 4"], 
     ["NAME: Name4","DIRECTION: Salida","CHARGED: 1","AFFORDED: 0"], 
     ["NAME: Name5","DIRECTION: Entrada","CHARGED: 15","AFFORDED: 15"], 
     ["NAME: Name6","DIRECTION: Entrada","CHARGED: 10","AFFORDED: 10"], 
     ["NAME: Name7","DIRECTION: Entrada","CHARGED: 15","AFFORDED: 15"], 
     ["NAME: Name8","DIRECTION: Entrada","CHARGED: 3","AFFORDED: 3"], 
     ["NAME: Name9","DIRECTION: Entrada","CHARGED: 15","AFFORDED: 15"] 
    ] 
}

И это мой Javascript

<script> 

$(document).ready(function() {  
    var tableEntityList = $('#testable').DataTable({   
     "processing": true, 
     "scrollY":"500px", 
     "scrollCollapse": true, 
     "paging":false, 
     "serverSide":true, 
     "ajax":"./MyJson", 
     "columns": [ 
      { "data":'NAME' }, 
      { "data":'DIRECTION' }, 
      { "data":'CHARGED' }, 
      { "data":'AFFORDED' } 
     ] 
    }); 
}) 
</script> 

<body> 

<table class="display responsive nowrap" id="testable" cellspacing="0"> 
<thead> 
<th>NAME</th> 
<th>DIRECTION</th> 
<th>CHARGED</th> 
<th>AFFORDED</th> 
</thead> 
<tbody> 
</tbody> 

</table>

Можете ли вы сказать мне, что я делаю неправильно?

спасибо.

источник

2017-02-19 Lev

Вам необходимо обработать данные перед передачей их в DataTables, и вы можете сделать это в пределах dataSrc. Проверьте это JSFiddle:

let jsonData = { 
    "data": [ 
     ["NAME: Name1", "DIRECTION: Salida", "CHARGED: 15", "AFFORDED: 15"], 
     ["NAME: Name2", "DIRECTION: Salida", "CHARGED: 4", "AFFORDED: 4"], 
     ["NAME: Name3", "DIRECTION: Entrada", "CHARGED: 4", "AFFORDED: 4"], 
     ["NAME: Name4", "DIRECTION: Salida", "CHARGED: 1", "AFFORDED: 0"], 
     ["NAME: Name5", "DIRECTION: Entrada", "CHARGED: 15", "AFFORDED: 15"], 
     ["NAME: Name6", "DIRECTION: Entrada", "CHARGED: 10", "AFFORDED: 10"], 
     ["NAME: Name7", "DIRECTION: Entrada", "CHARGED: 15", "AFFORDED: 15"], 
     ["NAME: Name8", "DIRECTION: Entrada", "CHARGED: 3", "AFFORDED: 3"], 
     ["NAME: Name9", "DIRECTION: Entrada", "CHARGED: 15", "AFFORDED: 15"] 
    ] 
}; 

$(document).ready(function() { 
    var tableEntityList = $('#testable').DataTable({ 
     "processing": true, 
     "scrollY": "500px", 
     "scrollCollapse": true, 
     "paging": false, 
     "ajax": { 
      type: 'POST', 
      dataType: 'json', 
      url: '/echo/json/', 
      data: { 
       json: JSON.stringify(jsonData) 
      }, 
      dataSrc: function(json) { 
       var properData = []; 
       $.each(json.data, function(k, v) { 
        var returnObject = {}; 
        $.each(v, function(a, b) { 
         var elArr = b.split(":"); 
         returnObject[elArr[0].trim()] = elArr[1].trim() 
        }); 
        properData.push(returnObject) 
       }); 
       return properData; 
      } 
     }, 
     "columns": [{ 
      "data": 'NAME' 
     }, { 
      "data": 'DIRECTION' 
     }, { 
      "data": 'CHARGED' 
     }, { 
      "data": 'AFFORDED' 
     }] 
    }); 
});

Пожалуйста, обратите внимание, что хотя serverSide не будет работать!

источник

2017-02-20 08:04:01 annoyingmouse

Спасибо. Он решен !. – Lev

Если вы используете columns.data, это означает, что ваш массив JSON должен уже поля отображаются с соответствующим именем поля NAME, DIRECTION, CHARGED и AFFORDED, как это:

var dataSet = [ 
    { "NAME": "Name1", "DIRECTION": "Salida", "CHARGED": 15, "AFFORDED": 15 }, 
    { "NAME": "Name2", "DIRECTION": "Salida", "CHARGED": 4, "AFFORDED": 4 }, 
    { "NAME": "Name3", "DIRECTION": "Entrada", "CHARGED": 4, "AFFORDED": 4 }, 
    { "NAME": "Name4", "DIRECTION": "Salida", "CHARGED": 1, "AFFORDED": 0 }, 
    { "NAME": "Name5", "DIRECTION": "Entrada", "CHARGED": 15, "AFFORDED": 15 }, 
    { "NAME": "Name6", "DIRECTION": "Entrada", "CHARGED": 10, "AFFORDED": 10 }, 
    { "NAME": "Name7", "DIRECTION": "Entrada", "CHARGED": 15, "AFFORDED": 15 }, 
    { "NAME": "Name8", "DIRECTION": "Entrada", "CHARGED": 3, "AFFORDED": 3 }, 
    { "NAME": "Name9", "DIRECTION": "Entrada", "CHARGED": 15, "AFFORDED": 15} 
];

Проверить this fiddle

В вашем случае хотите иметь только данные без имени поля, так как вы используете встроенный массив, вы должны иметь что-то вроде:

var dataSet = [ 
    ["Name1", "Salida", "15", "15"], 
    ["Name2", "Salida", "4", "4"], 
    ["Name3", "Entrada", "4", "4"], 
    ["Name4", "Salida", "1", "0"], 
    ["Name5", "Entrada", "15", "15"], 
    ["Name6", "Entrada", "10", "10"], 
    ["Name7", "Entrada", "15", "15"], 
    ["Name8", "Entrada", "3", "3"], 
    ["Name9", "Entrada", "15", "15"] 
];

Вы можете изменить columns.data на column.title, чтобы установить заголовок данных непосредственно для каждого элемента элемента массива. Проверка this fiddle

Как вы указали название поля в своих данных. Лучше всего изменить свой входной источник JSON, чтобы вернуть что-то прямое использование. Если вы не можете этого сделать, вы можете изменить полученные данные и реорганизовать их, удалив имя встроенного поля, а затем инициализируйте данные с новым измененным вводом.

источник

2017-02-19 19:11:13

подход, связанный с раздражающими моделями, решил мою проблему.

Мой последний звонок:

var tableEntityList = $('#testable').DataTable({   
     "processing": true, 
     "scrollY":"500px", 
     "scrollCollapse": true, 
     "paging":false, 
     "serverSide":true, 
     "ajax":{ 
      url:"./MyJson", 
      dataSrc: function(json) { 
       var properData = []; 
       $.each(json.data, function(k, v) { 
        var returnObject = {}; 
        $.each(v, function(a, b) { 
         var elArr = b.split(":"); 
         returnObject[elArr[0].trim()] = elArr[1].trim() 
        }); 
        properData.push(returnObject) 
       }); 
       return properData; 
      } 
     }, 
     "columns": [ 
      { "data":'NAME' }, 
      { "data":'DIRECTION' }, 
      { "data":'CHARGED' }, 
      { "data":'AFFORDED' } 
     ] 
    });

источник

2017-02-20 19:02:04 Lev

ответ

Смежные вопросы