dataTables的使用

一、datatable的初始化

项目预览

引入资源文件

1.原滋原味的datatable样式

2.基于bootstrap样式引入静态资源

ps:datatables.bootstrap.js是为了给table中的dom元素加上bootstrap样式类名使页面在渲染的时候能够按照bootstrap的样式进行渲染，这里也必须引入datatable.js

3.基于jqueryUI的资源引入与bootstrap的差不多

二、datatable的数据

1.数据写在页面中

    **html**

         

                

                    

                        
用户ID
                        
用户名
                        
创建时间
                        
更新时间
                        
操作
                    
                
                

                    

                        
用户ID1
                        
用户名$
                        
2016-12-26
                        
2017-1-6
                        

                            编辑
                            删除
                        
                    
                
          
          
    **js部分**

          

2.Ajax直接请求数据 ps:直接请求的要符合datatable的数据格式要求，无论是object格式的还是arry数组格式的

    **html** 

                

                    

                        

                            
用户名称
                            
用户ID
                            
创建日期
                            
更新日期
                        
                    
                
                
    **js部分** 

            $("#dataTable").dataTable({
                "language": lang,
                "ajax": '/ajax',
                "columns": [
                    { "data": "useName" },
                    { "data": "userId" },
                    { "data": "createTime" },
                    { "data": "updateTime" }
                ]
            });
            
    **返回的数据格式**(object)因为使用规定的数据格式，后台修改参数的原因可以使用**自定义Ajax加载数据格式**               


         {"data":[
                {
                    "useName":"hult",
                    "userId":"gmbub2",
                    "createTime":"2012-10-06",
                    "updateTime":"1976-05-30"
                },
                {
                    "useName":"qtik",
                    "userId":"nsgta6",
                    "createTime":"1980-12-14",
                    "updateTime":"2004-07-24"
                },
                {
                    "useName":"grqw",
                    "userId":"bpkci8",
                    "createTime":"1980-06-06",
                    "updateTime":"1984-03-17"
                }
                ]}

3.自定义Ajax直接请求数据 ps:就是使用回调函数处理数据然后再返回

    **html**      ps:直接可以去掉标签直接在页面中写

                
                
    **js部分** 

            $("#dataTable").dataTable({
                "language": lang,
                "destroy":true, //这个如果不加的话不能够再次调用这个函数
                "ajax":function (data,callback,setting) {
                    $.ajax({
                        url:"/defined",
                        success:function (returnData) {
                            //这边只是为了修改数据的格式使其符合datatable的数据格式
                            console.log(data);
                            var result={};
                            result.data=returnData.tian;
                            callback(result)
                        }
                    })
                },
                "columns": [
                    {
                        "data": "useName",
                        "title":"用户名称"
                    },
                    {
                        "data": "userId",
                        "title":"用户ID"
                    },
                    {
                        "data": "createTime",
                        "title":"创建日期"
                    },
                    {
                        "data": "updateTime",
                        "title":"更新日期"
                    }
                ]
            });
            
    **返回数据** 

            {
                "tian":[
                    {
                        "useName":"mhrs",
                        "userId":"eqrho10",
                        "createTime":"2007-01-21",
                        "updateTime":"2011-03-29"
                    },
                    {
                        "useName":"llmf",
                        "userId":"ynycd3",
                        "createTime":"1985-01-10",
                        "updateTime":"2003-11-14"
                    },
                    {
                        "useName":"nfmw",
                        "userId":"hrctz4",
                        "createTime":"2013-01-19",
                        "updateTime":"1976-07-13"
                    }
                ]
            }

4.自定义Ajax直接请求数据开启服务器模式 ps:就是后台数据量非常大的时候这时候就要启用这个模式，因为数据量太大耗费浏览器的资源太多，所以才有服务器模式，就是每次只请求一个分页的数据，这是就要将一个页面的展示多少条，排序的参数，搜索的关键字都要通过回调函数的function(data,callback,setting){}中的data参数获取，处理然后再传给ajax的参数中

    **html**      ps:直接可以去掉标签直接在页面中写

                
                
    **js部分** 

             function getParamter(event) {
                var query={};
                query={
                    "keyWord":      event.search.value, //搜索的关键字
                    "order":        event.order,        //排序
                    "currentPage":  event.length        //当前页多少数据
                };
                return query
             }
    
            $("#dataTable").dataTable({
                "language": lang,
                "destroy":true, //这个如果不加的话不能够再次调用这个函数
                "serverSide": true,
                //主要的区别


                 ajax:function (data,callback,setting) {
                    console.log(data,'t');//服务器开启的时候会有一个对象，若果不是服务器模式不会有数据
                    console.log(callback,'z');//回调函数
                    console.log(setting,'h');
                    $.ajax({
                        url:"/defined",
                        data:JSON.stringify(getParamter(data)),
                        success:function (data) {
                            //这边只是为了修改数据的格式使其符合datatable的数据格式
                            console.log(data);
                            var result={};
                            result.data=data.tian;
                            result.recordsFiltered =100;
                            result.recordsTotal = 10;
                            callback(result)
                        }
                    })
                },
                "columns": [
                    {
                        "data": "useName",
                        "title":"用户名称"
                    },
                    {
                        "data": "userId",
                        "title":"用户ID"
                    },
                    {
                        "data": "createTime",
                        "title":"创建日期"
                    },
                    {
                        "data": "updateTime",
                        "title":"更新日期"
                    }
                ]
            });