Question

我在一个名为qnams.php的文件中有这个PHP脚本，它返回JSON：

include ("../include/database.php");

include ("../include/sessions.php");

$select = "SELECT  column1,column2,column3,column4
           FROM  qnamtable WHERE  USER = '$username'";

$query = mysqli_query($dbc, $select) or die(mysqli_error());

$out = array();

while ($row = $query->fetch_array()) {
    $out[] = $row;
}
echo json_encode($out);

mysqli_free_result($query);

我发现了关于如何将JSON直接添加到dataTable中的不同帖子，但对如何继续进行了一些混淆。

在我的主页上，我在页面底部有这个功能：

$(function() {
    $('#example1').dataTable({
        "bPaginate": false,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "sScrollY": "auto",
        "sScrollCollapse": true,
        "bAutoWidth": true
    });
});

我需要向此函数添加什么以包含带有所有标头和数据的JSON？

Answer 1

您需要使用Jquery Datatables的ajax选项

ajax：{ url：'/ path / to / php / file / with / jsondata' }

Answer 2

您可以使用以下内容，

$(function() {
    $('#example1').dataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "qnams.php" //set your php file location
        "bPaginate": false,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "sScrollY": "auto",
        "sScrollCollapse": true,
        "bAutoWidth": true
    });
});

html应如下所示，确保 id 应为 example1

轻松设置所有标题。

<table id="example1" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
      <th>column4</th>
      <th>column5</th>
      <th>column6</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <th>column1</th>
      <th>column2</th>
      <th>column3</th>
      <th>column4</th>
      <th>column5</th>
      <th>column6</th>
    </tr>
  </tfoot>
</table>

查看here

中的更多信息

Answer 3

首先我要说你应该使用fetch_assoc，而不是fetch_array()。 fetch_array()将包含关联的和索引数组：

[{"0":"x","column1":"x","1":"y","column2":"y"}]

我们只需要

[{"column1":"x","column2":"y"}]

然后这是一个用于填充

的完全自动化的脚本

<table id="example1"></table>

任何JSON，只要它是正确的（如你的PHP脚本似乎）：

$.ajax({
    url : 'qnams.php',
    dataType : 'json',
    success : function(json) {
        //build the column definitions for titles and data-indexes 
        var columns = [];
        Object.keys(json[0]).forEach(function(column) {
            columns.push({ title: column, data: column })
        })
        $('#example1').dataTable({      
            data : json,
            columns : columns,

            "bPaginate": false,
            "bLengthChange": true,
            "bFilter": true,
            "bSort": true,
            "bInfo": true,
            "sScrollY": "auto",
            "sScrollCollapse": true,
            "bAutoWidth": true
        })
    }
});

我假设您使用的是1.10.x的dataTatables。

Answer 4

这里的所有其他答案都很有用，但最后，我只需要获取最新版本的jQuery DataTables。我使用较旧的模板使用较新的代码，这是影响我的结果的主要问题。

AJAX JSON加载jQuery dataTable

4 个答案: