Datatables——一款前端好用的表格插件,本地json模拟数据实现表格分页查询

最新推荐文章于 2024-08-10 13:02:01 发布

原创

最新推荐文章于 2024-08-10 13:02:01 发布 · 2.7k 阅读

CC 4.0 BY-SA版权

在做管理后台功能时，经常需要用到表格展示数据，从数据库查询返回的数据，返回集合或数组到前台，然后前台将数据渲染成表格，方便直观展示数据，通常还需要结合分页、查询、排序。Datatables是一款符合上面所有需求的表格插件，基于jquery，方便我们对表格进行交互操作
Datatables中文网链接

这是一个读取本地json数据渲染表格的示例

使用步骤

一：从官网下载最新版本的插件，并在页面中应用相应的js和css文件,我这里是引用cdn提供的文件

    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

二：创建页面绑定表格的插件

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

三：为元素绑定Datatables，并初始化表格配置项

var table;
var classType={
        1:'一班',
        2:'二班',
        3:'三班',
        4:'四班',
        5:'五班'
    }
    function createTable() {
        table = $('#tableList').DataTable({
            "bPaginate" : true,
            "sPaginationType" : "full_numbers",
            "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
            "bScrollCollapse" : true, //当显示的数据不足以支撑表格的默认的高度
            "bLengthChange" : true, //每页显示的记录数
            "bFilter" : false, //搜索栏
            "bSort" : true, //是否支持排序功能
            "bInfo" : true, //显示表格信息
            "bAutoWidth" : true, //自适应宽度
            "bJQueryUI" : f