关闭

Jquery datatable的详细使用

标签: jquerydatatable表格api百度
112人阅读 评论(0) 收藏 举报
分类:

最近公司项目用到表格,又发现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拼接成字符串。

  1. dialog要用表单包裹起来;
  2. 自定义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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4574次
    • 积分:229
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章分类