博客

如何在DataTables中从文本文件加载JSON数据进行分页

  • Post category:jquery

准备

在开始之前，请确保您已经安装了DataTables，并已经包含了所需的样式表和脚本文件。接下来我们需要准备一个包含JSON数据的文本文件，并确保该文件符合JSON数据格式的要求，即字符串必须包括在双引号中，而不是单引号。

步骤

  1. 创建HTML文件，并添加一个空的表格元素。例如：
<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
</table>

2.加载数据文件并使用DataTables的ajax选项加载JSON数据。例如：

$(document).ready(function() {
    $('#myTable').DataTable( {
        "ajax": "data.json",
        "columns": [
            { "data": "name" },
            { "data": "age" },
            { "data": "gender" }
        ]
    } );
} );

这里，我们将数据文件指定为”data.json”，并指定了表格的列名。

  1. 如果您想启用服务器端分页的话，可以使用DataTables的服务器端模式，这里就不再做详细的讲解了。

示例

  1. 在服务器端使用PHP脚本生成JSON数据

PHP脚本示例:

<?php
$json = '[{"name":"David","age":"27","gender":"M"},{"name":"Alice","age":"24","gender":"F"}]';
echo $json;
?>

HTML文件中的DataTables初始化代码：

$(document).ready(function() {
    $('#myTable').DataTable( {
        "ajax": "data.php",
        "columns": [
            { "data": "name" },
            { "data": "age" },
            { "data": "gender" }
        ]
    } );
} );
  1. 在客户端使用jQuery加载JSON数据

HTML文件中的DataTables初始化代码：

$(document).ready(function() {
    $.getJSON('data.json', function(data) {
        $('#myTable').DataTable( {
            "data": data,
            "columns": [
                { "data": "name" },
                { "data": "age" },
                { "data": "gender" }
            ]
        } );
    });
});

希望这份攻略对您有所帮助。

Tags: