Jquery datatable的详细使用

来源：互联网发布：好听的网络对唱情歌编辑：程序博客网时间：2024/06/12 21:35

最近公司项目用到表格，又发现jquery有好几个表格插件很好用，就选了比较简单的datatable来用，也学习了一番，跟大家分享一下使用的心得。

上面是效果图，使用datatable要先引入包含js和css的文件，这个是datatable的官方文档，https://datatables.net/英文的，小伙伴可以用谷歌翻译成中文，里面所有的api函数什么的都有，慢慢琢磨哈哈！关于参数也可以百度datatable 参数就有挺多讲解的。

在右边的这两个就是js和css文件啦,下载后引入即可。

这里写图片描述

接下来进入正文：

初始化表格：

 oTable1 = $('#sample-table-2').DataTable({    "sDom": '<"top"><"col-sm-12"t<"col-xs-5"li><"col-xs-7"pr>>',    //表格控件布局设置 t/table  p/page r/processing l/分页控件 i/总页数    "bProcessing":true,//加载进度    "sAjaxDataProp": "data",//数据项名称    "sAjaxSource": "http://123.56.93.33:8088/kiunionSer/ws/v1.0/vehicleBaseInfo/searchByEnterprise?enterpriseId=1",//服务器    "bServerSide": true,//启用服务器调试        "bAutoWidth": true,//自动宽度        "aLengthMenu": [10, 20, 30, 40, 50, 100],//分页设置});

一：请求表格数据，方法有两种：

1：自定义Array数据测试:

刚使用datatable可以用这个测试，自定义一串Array数据例如：

testData=[       ["2","23","2342"],       ["2","23","2342"],       ["2","23","2342"]   ]    oTable1 = $('#sample-table-2').DataTable({        "aaData":testData,    });

效果：

这里写图片描述

还有自定义json数据：

var  testData=[        {            "UserID": 671,            "UserName": "Cramer, Katherine",            "CommentsColumn": "Test record",},        {            "UserID": 671,            "UserName": "Cramer, Katherine",            "CommentsColumn": "Test record",},        {            "UserID": 671,            "UserName": "Cramer, Katherine",            "CommentsColumn": "Test record",},        ]    oTable1 = $('#sample-table-2').DataTable({        "aaData":testData,        //这里要自定义列 json数组必须，即定义每一格应该装什么数据         "aoColumns": [             {mData: 'UserID',},             {mData: 'UserName'},             {mData: 'CommentsColumn'},        })];

显示效果：

这里写图片描述应该很清晰明了了吧

2：ajax请求服务器数据

最开始的效果就是Ajax请求服务器数据的方法，我这里服务器返回的数据是json格式的

这里写图片描述

可以看到我这里data的value才是我要来填充表格的jsonArray，格式跟上面json数组格式是一样的，
（1）设置sAjaxSource 服务器地址, 然后设置sAjaxDataProp 数据项名称（我这里是data），
（2）注意服务器调试”bServerSide”: true,这个属性一定要加！
（3）自定义列 “aoColumns”: []， “bServerSide”: true,//启用服务器调试

上面就是ajax请求的最基本要设置的了，表里有数据之后呢我们就看如何往里面动态加数据和修改删除功能。

二：增删改查功能

1)增加：

我这里思路是将要增加的数据转为json数组，然后发送到服务器,服务器添加数据到数据库再返回json给我，如果json中的sueecss为true，我就刷新一下表格，即 oTable1.fnFilter(); 数据就增加了。

点击新建按钮弹出一个dialog

这里写图片描述

值得提的是这里传输数据我用了两种方法

（1），jquery的遍历这个dialog里面的全部input，获取他们的值

 $("#dialog input")each(){        name=$(this).attr("name");//每个input的name设置为json的键        addData[name] =$(this).val();    }

（2），通过serializeObject直接获取全部输入框的值，这个函数会将input的name和value拼接成字符串。

dialog要用表单包裹起来；
自定义serializeObject（），不定义的话格式不是json，

 $.fn.serializeObject = function()    {        console.log("serializeObject");        var o = {};        var a = this.serializeArray();        $.each(a, function() {            if (o[this.name]) {                if (!o[this.name].push) {                    o[this.name] = [o[this.name]];                }                o[this.name].push(this.value || '');            } else {                o[this.name] = this.value || '';            }        });        return o;    };

 var addData=$('#editForm').serializeObject();

这样就能取到所有数据了,是不是很方便呢

ajax上传数据：

$.ajax({        //提交数据的类型 POST GET        type: "GET',        //提交的网址        url: url,        //提交的数据        data:JSON.stringify(addData),        contentType:"application/json", //提交给服务器的数据类型        //返回数据的格式        datatype: "json",//"xml", "html", "script", "json"         //成功返回之后调用的函数,在这里刷新一下表格        success: function (data) {            $('#sample-table-2').dataTable().fnDraw(false);        },       })

增加到这里就差不多了，如果想到要加的我会及时更新的。

2）修改：

0 0