Jquery datatable的详细使用

原创 2016年08月30日 09:31:04

最近公司项目用到表格,又发现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)修改:

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery datatable ajax后台数据来源使用

1.jsp格式 id="sample_1"> data-set="#sample_1 .checkboxes" /> 账号 姓名 电子邮箱 ...
  • yxking1
  • yxking1
  • 2014年04月28日 11:49
  • 3494

jQuery dataTable使用详解 141105

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/no...

jquery datatable插件使用分享

这个插件很好用,筛选,分页等功能都是内置的了。重要的是根据自己的喜爱,变换它的css。 本文主要写个和ajax交互的小例子。...

分享在MVC3.0中使用jQuery DataTable 插件

分享在MVC3.0中使用jQuery DataTable 插件      前不久在网络上看见一个很不错的jQuery的DataTable表格插件。后来发现在MVC中使用该插件的文章并不多...

使用jquery DataTable和ajax向页面显示数据列表

首先在html页面定义好相关长度的行和列,假设table的id=data-table“” 使用jquery DataTable在js中这么写 $(function() { $('#data-ta...

分享在MVC3.0中使用jQuery DataTable 插件

http://www.cnblogs.com/ryanding/archive/2011/02/18/1957318.html 官方网站 http://datatables.net/
  • sui84
  • sui84
  • 2015年08月09日 16:44
  • 404

java中jquery datatable表格的使用

这两天基于struts2的web项目需要报表排序功能,上网找了一些jquery的插件,找到了一个datatable。搞了两天,弄出个样子。但是导出功能不满足客户需求。所以暂时将该功能搁置了。自己在其中...

jquery datatable使用

html代码 table cellpading="0" cellspacing="0" border="0" class="dTable acelistTable"> thead> ...
  • ynwso
  • ynwso
  • 2015年08月29日 12:41
  • 1294

使用jquery dataTable

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明...

Jquery Datatable的使用样例(ssm+bootstrsp框架下)服务器端分页

Jquery Datatable的使用样例 (ssm+bootstrsp框架下)服务器端分页
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery datatable的详细使用
举报原因:
原因补充:

(最多只允许输入30个字)