第17章 分页与JQuery DataTables渲染显示

$(document).ready(function() {
    var table = $('#example').DataTable({
        "ajax": "data.json", // 获取数据的URL
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "age" },
            { "data": "start_date" },
            { "data": "salary" }
        ],
        "pagingType": "full_numbers", // 分页样式
        "order": [[1, 'asc']], // 默认排序
        "displayLength": 10, // 默认每页显示条数
        "lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]] // 自定义每页显示条数选项
    });
 
    // 监听表格重载事件
    $('#reload-table').on( 'click', function () {
        table.ajax.reload();
    } );
} );

这段代码使用jQuery DataTables插件来渲染一个表格，并配置了基本的分页和排序功能。它还展示了如何在用户点击一个按钮后手动刷新表格的数据。这是一个很好的实践，展示了如何将DataTables插件整合到一个实际的项目中去。