码迷,mamicode.com
首页 > 其他好文 > 详细

datatable使用介绍

时间:2018-03-22 19:21:39      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:jquer   数据表   后台   key   boot   bsp   兼容   read   count   

Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

1、支持分页:前台分页和后台分页

前台分页:后台一次把数据传过来,交给前端渲染。缺点:初次渲染时间长;优点:渲染完成后,搜索和排序速度很快

后台分页:前端把每页显示的条数、查询的页数、搜索的内容、排序列等信息传给后端,后端收到这些信息后,去数据库里查询指定页的信息,并统计出总共条数等信息,而后传给前端。缺点:每次排序、搜索、翻页都要去后台查库,耗时;优点:初次渲染快

共同点:随着数据量的增大,二者的查询时间都会变成。但是前台分页,需要网络传输大量的后台信息到前台,网络传输时间长,前端渲染压力大;后台分页每次只传输固定量的数据,网络耗时少,但是查库次数多。总得来看,对于数据量递增的情况,还是选用后台分页

2、其他功能见官网:举例、手册、插件、接口、论坛、博客等,一应俱全。看着样例,比葫芦画瓢总会的

中文官网:http://datatables.club/example/ 里面有大量的信息

英文官网:https://datatables.net/examples/server_side/post.html

3、1.10+版本前后,有些参数名字有调整,但是具有向下兼容性

4、后台分页的例子:https://datatables.net/examples/server_side/

JS代码

$(document).ready(function() {
    $(‘#example‘).DataTable( {
        "processing": true,      //翻页或者搜索的时候,前端是否给出“正在搜索”等提示信息
        "serverSide": true,     // true表示使用后台分页
        "ajax": {
            "url": "scripts/post.php",  // 异步传输的后端接口url
            "type": "POST"      // 请求方式
        },
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

html代码:添加一个table标签,表头和表尾信息,必须有表头信息<thead>; <tbody></tbody> 可以不用,dataTables.js可以动态加载

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

ajax调用后端接口,后端接口返回信息的格式

{
  "draw": 1,       //这个可以不写,有时候写会有问题,但是官方基于安全角度考虑建议写
  "recordsTotal": 57,  //总条数、总行数
  "recordsFiltered": 57,  //过滤出来的总行数、条数
//下面是前端展示的数据内容
"data": [ { "first_name": "Airi", "last_name": "Satou", "position": "Accountant", "office": "Tokyo", "start_date": "28th Nov 08", "salary": "$162,700" }, { "first_name": "Angelica", "last_name": "Ramos", "position": "Chief Executive Officer (CEO)", "office": "London", "start_date": "9th Oct 09", "salary": "$1,200,000" }] }

 

下面是数据表的初始化设置:控制前端界面展示情况

$(function () {
    $(‘#test-interface-table‘).dataTable(
      {
          "ajax": {
              "url": "/a/b",
              "type": "POST"
          },
          "processing": true,
          "serverSide": true,
          "bPaginate" : true,//分页工具条显示
          "bFilter" : true, //搜索栏
          "bSort" : false, //是否支持排序功能
          "order": [[3, "desc"]],//默认使用第几列排序
//中文化界面显示
"language": { "lengthMenu": "每页显示 _MENU_条数据", "sSearch": "搜索: ", //搜索框label "sSearchPlaceholder":"区域、项目名称、场景名字、执行人", //搜索框里的提示信息placeholder {#info: "当前是_PAGE_页,总共_PAGES_ 页,显示第_START_ 到第 _END_ ,筛选之后得到 _TOTAL_ 条,初始_MAX_ 条 ",//左下角的信息显示,大写的词为关键字。#} "info": "第_PAGE_/_PAGES_页, 显示第_START_到第_END_, 搜索到_TOTAL_/_MAX_条", "infoFiltered":"", //过滤时的显示信息 "sProcessing": "正在加载数据,请稍等", //翻页、搜索时的前端提示信息 "zeroRecords": "抱歉,没有数据", //无数据时的前端信息 paginate: {//分页的样式内容。 previous: "上一页", next: "下一页", first: "第一页", last: "最后" } } } ); });

5、dataTable还可以解释bootstrap定制css样式

6、option ajax data 根据参数查询表格数据

dataTables本身是可以把一些参数从前端传给后端的,初次之外,你可以增加从前端传给后端的参数

7、修改搜索框的触发事件:默认是只要键盘弹起(keyup),就会开始搜索,比如你想搜索‘ab’,当你键盘输入完a再输入b时,会先搜索a,然后搜索ab。要么就把ab粘贴进去,就只会搜索ab,不会搜索a了。

但是我们可以根据下面文章的信息修改搜索触发事件为:回车

http://blog.csdn.net/u012088516/article/details/52423248

参考:

1、http://blog.csdn.net/huaishuming/article/details/52211259

2、http://blog.csdn.net/shya_/article/details/55510480

3、http://blog.csdn.net/tomcat_2014/article/details/50177645

4、http://blog.csdn.net/KokJuis/article/details/53925783

5、https://github.com/ssy341/datatables-cn

6、http://blog.163.com/huajin_226/blog/static/1773512302014812256921/

7、http://www.datatables.club/manual/daily/2016/04/21/option-ajax-data.html

datatable使用介绍

标签:jquer   数据表   后台   key   boot   bsp   兼容   read   count   

原文地址:https://www.cnblogs.com/shengulong/p/8625239.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!