Невозможно заставить Datatables работать с простыми данными JSON - PullRequest
Новая
       1

Невозможно заставить Datatables работать с простыми данными JSON

0 голосов
/ 27 октября 2019

Я довольно новичок во внешнем интерфейсе и пытаюсь преобразовать вызов JSON в табличный формат. Я читал, что таблицы данных - это путь. Но я не могу заставить это работать. Пожалуйста помоги. Это мой json get call. 

GET /api/v1/get
{"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"}

Это мой HTML-код из index.html. Я питаю это с помощью колбы. 

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />

  <title></title>
  <link rel="stylesheet" type="text/css" href=
  "https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css" />
  <link rel="stylesheet" type="text/css" href=
  "https://cdn.datatables.net/1.10.20/css/dataTables.material.min.css" />
  <link rel="stylesheet" type="text/css" href=
  "https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
</head>

<body>
  <table id="table4">
    <thead>
      <tr>
        <th>name</th>

        <th>position</th>

        <th>salary</th>

        <th>start_date</th>

        <th>office</th>

        <th>extn</th>
      </tr>
    </thead>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type=
  "text/javascript">
</script><script type="text/javascript" language="javascript" src=
"https://code.jquery.com/jquery-3.3.1.js">
</script><script type="text/javascript" language="javascript" src=
"https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
</script><script type="text/javascript" language="javascript" src=
"https://cdn.datatables.net/1.10.20/js/dataTables.material.min.js">
</script><script type="text/javascript">
//<![CDATA[
  $(document).ready(function() {
  $('#table4').DataTable( {
  ajax: {
    url: '/api/v1/getec2',
    dataSrc: ''
  },
  columns: [
        { "data": "name" },
        { "data": "position" },
        { "data": "salary" },
        { "data": "start_date" },
        { "data": "office" },
        { "data": "extn" }
   ]
  } );
  } );
  //]]>
  </script>
</body>
</html>

Пожалуйста, дайте мне знать, если мне нужно добавить что-нибудь еще.

Ответы [ 2 ]

0 голосов
/ 27 октября 2019

Предполагая, что данные, поступающие из API, на самом деле являются списком объектов: 

//some api call
function fetchData() {
  return Promise.resolve([
  {"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"},
  {"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"},
  {"extn":"5421","name":"Tiger Nixon","office":"Edinburgh","position":"System Architect","salary":"$320,800","start_date":"2011/04/25"}
  ])
}

//since not clear
//actual api call could have been something like
//function fetchData() {
// return fetch('/api/v1/get');
//}


fetchData().then(data => {


  $('#someTable').DataTable( {
        data: data,
        columns: [
        { "data": "name" },
        { "data": "position" },
        { "data": "salary" },
        { "data": "start_date" },
        { "data": "office" },
        { "data": "extn" }
   ]
    } );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" type=
  "text/javascript">
</script><script type="text/javascript" language="javascript" src=
"https://code.jquery.com/jquery-3.3.1.js">
</script>
<script type="text/javascript" language="javascript" src=
"https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
</script>


	
<table id="someTable" width="100%"></table>

, если позже вы захотите обновить, прочитайте этот пост: Как перезагрузить / обновить jQuery dataTable?

ссылки: https://datatables.net/examples/data_sources/js_array.html

0 голосов
/ 27 октября 2019

Вы можете просто добавить все вручную, а затем вызвать только метод DataTable(), код будет выглядеть следующим образом: 

$(document).ready(function() {
    var json;
    $.get("/api/v1/getec2", function(data) { 
        json=JSON.parse(data);
    });

    $('#table4').append('<tbody><tr><td>'+json.name
        +'</td><td>'+json.position
        +'</td><td>'+json.salary
        +'</td><td>'+json.start_date
        +'</td><td>'+json.office
        +'</td><td>'+json.extn
        +'</td></tr></tbody>');

    $('#table4').DataTable();
});

Обратите внимание, что если API вернет массив с несколькими объектами, подобными этомувам нужно будет обернуть добавляемую часть в цикл for, который выполняет итерацию по массиву, код будет другим, например: 

$(document).ready(function() {
    var json;
    $.get("/api/v1/getec2", function(data) { 
        json=JSON.parse(data);
    });

    var s='<tbody>';
    for(i in json){
        var obj=json[i];
        s+='<tr><td>'+obj.name
        +'</td><td>'+obj.position
        +'</td><td>'+obj.salary
        +'</td><td>'+obj.start_date
        +'</td><td>'+obj.office
        +'</td><td>'+obj.extn
        +'</td></tr>';
    }
    s+='</tbody>';

    $('#table4').append(s);
    $('#table4').DataTable();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...