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)修改:

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

juqery datatable ajax请求后台数据 并为表格添加操作列

1.html部分: table id="example1" class="table table-bordered"> thead> tr> th>idth> ...
  • zzq962494
  • zzq962494
  • 2016年10月20日 15:32
  • 4952

datatable的使用

学习可参考:http://www.guoxk.com/node/jquery-datatables                       http://yuemeiqing2008-163...
  • yibing548
  • yibing548
  • 2015年04月16日 17:22
  • 80325

jQuery dataTable使用详解

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/no...
  • builderwfy
  • builderwfy
  • 2015年12月25日 09:54
  • 33617

JQuery datatables 重新加载新的action的url datatables ajax reload from new url(全网仅有的解决方案)

相信很多人都用到过datatables的点击按钮,更新url,重新更换数据(前提两次的数据结构是一样的),所以需要使用到table.ajax.url(url).load()方法,table需要声明成一...
  • omayyouhappy
  • omayyouhappy
  • 2016年12月01日 14:38
  • 10723

JQuery DataTable 使用教程

Datatables官方网站Datatables简介DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点...
  • Sunny_Ran
  • Sunny_Ran
  • 2017年08月10日 14:41
  • 354

关于JQUERY的DataTable插件的使用过程笔记【持续更新中……】

推荐学习站点:http://datatables.club/ 1、Ajax与远程服务器 因为一般我们的数据都是实时从远程服务器中获取,所以我们需要使用Ajax方式来获取发起请求,需要设置的参数: ...
  • starchange
  • starchange
  • 2016年08月07日 00:19
  • 1299

Jquery datatable的详细使用

最近在使用jquery 的datatable,自己摸索了函数和使用方法,总结出来给大家看看。...
  • sinat_34498624
  • sinat_34498624
  • 2016年08月30日 09:31
  • 251

JQuery-DataTable属性及方法列表.

  • 2012年05月24日 21:33
  • 15KB
  • 下载

jquery datatable的使用的记录(自己使用的)

对于datatable 是一个很好的分页插件,我的感受是简单好用,datatable的"columns" 中的数组的长度与要分页的table的列数是一样的,例如: colsname = [{"data...
  • lilovfly
  • lilovfly
  • 2016年12月12日 18:43
  • 1718

jQuery dataTable使用详解 141105

本文共四部分:官网 | 基本使用|遇到的问题|属性表 一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/no...
  • zhangdinet
  • zhangdinet
  • 2014年11月05日 11:54
  • 6427
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery datatable的详细使用
举报原因:
原因补充:

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