最近研究JQuery,发现了一个比较实用,好用的小插件给大家分享一下,希望在工作中可以对大家有所帮助。（注：示例代码附在文章末尾处）
这里我们要说的是JQuery的插件“DataTable”。
首先“DataTable”的作用:
     1.异步加载表格展示数据
     2.可以自动分页
     3.并且字段可以排序
     4.表格内容可以搜索
     5.表格的列可以自定义展示,例如:展示的样式,展示特效等..
以上作用都是插件帮我的实现的,我们只需要可以按照官方提供的API使用,即可实现上述所有功能,在实际工作中应用十分方便。
下面我们使用SSM(SpringMVC + Spring + Mybatis)框架,前台使用 bootstrap +Jquery搭建一个项目:(此处SSM框架不做详解,可以自己去看文章末尾示例代码)具体开发步骤:
     1.创建动态web工程,如图:
     
     2.导入SSM相关jar,如图:
     
     3.创建SSM工程目录
      
      4.创建SSM相关配置文件,并进行相关配置(具体可以查看示例代码),如图:
      
      5.导入JQuery DataTable依赖的相关静态资源(js、css)及后台需要的sql脚本,如图:
      

      6.JQuery DataTable API详解(以productList.js为例)
     

[JavaScript] 纯文本查看 复制代码

$(function() {
        /*Javascript代码片段*/
        var t = $('#sample-table').DataTable(
                        {
                                ajax : {
                                        //指定数据源
                                        url : "/jqueryDataTable/product/findProductList.do"
                                },
                                //每页显示三条数据
                                pageLength : 3,
                                columns : [ {
                                        "data" : null //此列不绑定数据源，用来显示序号
                                }, {
                                        "data" : "id"
                                }, {
                                        "data" : "name"
                                }, {
                                        "data" : "price"
                                }],
                                "columnDefs" : [{//每列定义
                                        "orderable": false,
                                        "targets": [0,2]//第0,2列不排序
                                },
                                {//自定义第"3"列内容(注意:列下标从"0"开始)
                                        "targets": 3,
                                        "render" : function(data, type, row, meta) {
                                                //渲染 把数据源中的标题和url组成超链接
                                                return '<td><input type="number" step="0.01" value="'+data+'" readonly="readonly"></td>';
                                        }
                                }]
                        });
        //前台添加序号
        t.on('order.dt search.dt', function() {
                t.column(0, {
                        "search" : 'applied',
                        "order" : 'applied'
                }).nodes().each(function(cell, i) {
                        cell.innerHTML = i + 1;
                });
        }).draw();
        // 更换数据源（相同格式，但是数据内容不同）
        var flag=true;
        $("#redraw").click(
                function() {
                        if(flag){
                                var url = $('#sample-table').DataTable().ajax.url("data/test-data.json");
                                url.load();
                                flag=false;
                        }else{
                                var url = $('#sample-table').DataTable().ajax.url("/jqueryDataTable/product/findProductList.do");
                                url.load();
                                flag=true;
                        }
                }
        );
});

因示例代码中注解很详细,这里就不再详述,如要详细了解"JQuery DataTable"进入链接: https://datatables.net/manual/api
(因项目大于2M上传不了,只能百度云盘共享)
示例代码: 链接：https://pan.baidu.com/s/1eTMeycU 密码：1x7w

好详细  收藏了  下次用的时候 直接翻出来对比着设置即可