当前位置: 首页 > 编程笔记 >

jQuery表格插件datatables用法汇总

宇文飞羽
2023-03-14
本文向大家介绍jQuery表格插件datatables用法汇总,包括了jQuery表格插件datatables用法汇总的使用技巧和注意事项,需要的朋友参考一下

DataTables是一个jQuery的表格插件,本文为大家分享了表格插件datatables用法,介绍了基础的部分知识,具体内容如下

一、初始化
在页面中

<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
 </head>
 <body>
  <table id="table_id" class="display">
 <thead>
  <tr>
   <th>Column 1</th>
   <th>Column 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Row 1 Data 1</td>
   <td>Row 1 Data 2</td>
  </tr>
  <tr>
   <td>Row 2 Data 1</td>
   <td>Row 2 Data 2</td>
  </tr>
 </tbody>
</table>
 </body>
</html>

js中初始化

$(document).ready( function () {
 $('#table_id').DataTable();
} );

二、常用配置
在初始化的时候可以通过一些常用的配置项对表格进行配置,这是我在项目中实际用到的

$("#vivo_table_list").dataTable({
   pageLength: 10,  //更改初始页面长度 (每页的行数)
   processing: true, //显示正在处理字符串
   serverSide: false, // 服务器模式,这一点非常奇怪*
   ordering: true,   // 是否启用Datatables排序
   searching: false,  // 开启搜索
   autoWidth: false,
   zeroRecords: "没有查询数据",
   destroy: true,   // 从当前上下文销毁掉Datatables对象 (妹搞懂)
   pagingType: "input", // 分页按钮种类显示选项
   language: {
    url: "cn.txt" // 本地化
   },
   dom: "tr<'row-fluid'<'span6'i><'span6'p>>", // 按什么顺序定义表的控制元素在页面上出现(妹搞懂)
   ajax: {
    url: "/url",
    type: "post", // ajax请求的类型 **
    data: function () {
     return that.getQueryParams(); // ajax的参数
    }
   },
   columns: [
    {title: "id", data: "id", orderable: true},
    {title: "uid", data: "uid", orderable: false},
    {title: "昵称", data: "nick", orderable: false},
    {title: "姓名", data: "name", orderable: false},
    {title: "电话", data: "tel", orderable: false},
    {title: "申请时间", data: "stimeshow", orderable: true},
    {title: "状态", data: "statshow", orderable: false},
    {
     title: "操作", orderable: false, render: function (data,type,full) {
     return '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' +
      ' <button id="forbidButton" class="forbid glyphicon glyphicon-thumbs-down"></button>'+
      '<input type="hidden" value="'+full.id+'"/>';
    }
    }
   ]
  });

后台传回的数据一定要是一个map,key是 "data",value 是数据(如果数据是List要 toArray()),其中 data 也是 DataTables 的参数之一,表示表格要显示的数据,所以你可以在这个map中放上其他的表格参数,只要把key设置为参数名就可以了。

*:配置中serverSide开启服务器模式,在工作使用中表格的数据是通过ajax从后台获取,就理所当然地打开了这个模式,但是表格对某一列排序的功能就失效了,而随后我关闭了这一模式,发现就可以对表格中的列进行排序,表格的数据还是从服务器获取……所以这个模式还有待研究

**: 在项目中后台controller接收的参数是数组,ajax的请求包含复杂参数的时候,请求的类型一定要是post;

三、进阶功能
1、隐藏列
可以通过 "columns.visible" 属性规定列是否显示,但是这样就不能获取此列的值,如果要隐藏id列,又要根据id触发事件就办不到了 = =,后来查API后想了一个笨办法,可以借助 columns.render 属性,用法如下:

{
  title: "操作", orderable: false, render: function (data,type,full) {
  return '<input type="hidden" value="'+full.id+'"/>';
  }
}

注意 render 后的函数有三个参数,data/type/full,其中full参数是行的所有数据(官网在此注明:只是行中的数据,而不是data属性的值,所以就算data中有你想要的值,但你没有给他一列的话也是获取不到的),可以在render中直接使用你想隐藏的值,如果表格外部要引用这个值,可以在render中组装一个隐藏的<input>,外部就可以获取到了,不过这种方法真的非常蠢,如果你有好的方法,请一定要告诉我。

2、输入页码跳转页面
我们可以通过 pagingType 属性来设置表格分页按钮样式,但是DataTables的几个默认样式都没有项目中需要的输入页码进行跳转的样式。但是在官网的 plug-in 页中介绍了几种分页按钮的插件,其中的 input 分页插件就可以满足我们的需求,只要引入插件的js,再将 pagingType 的值改为 "input" 就可以了。js文件的 CDN 是:

//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js

以上就是本文的全部内容,希望对大家的学习有所帮助。

DataTables 官网

 类似资料:
  • 本文向大家介绍jQuery表格插件datatables用法总结,包括了jQuery表格插件datatables用法总结的使用技巧和注意事项,需要的朋友参考一下 DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。 官方网站及其下载地址:http:/www.datatables.net 当前最新版为1.10.2,

  • 本文向大家介绍jQuery表格插件datatables用法详解,包括了jQuery表格插件datatables用法详解的使用技巧和注意事项,需要的朋友参考一下 一、Datatables简介 DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检

  • 本文向大家介绍jQuery插件datatables使用教程,包括了jQuery插件datatables使用教程的使用技巧和注意事项,需要的朋友参考一下 jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 如何把数据库中的数据以表格的形式展示到前端,实现有很多方法,最近用jquery的datatables插件来实现了发

  • 本文向大家介绍jQuery插件开发汇总,包括了jQuery插件开发汇总的使用技巧和注意事项,需要的朋友参考一下 一、jQuery插件开发两个底层方法 jQuery.extend([deep ], target [, object1 ] [, objectN ] ) 将两个或更多对象的内容合并到第一个对象。 1、deep 如果是true,合并成为递归(又叫做深拷贝) 2、target 一个对象,如果

  • 本文向大家介绍jQuery插件dataTables添加序号列的方法,包括了jQuery插件dataTables添加序号列的方法的使用技巧和注意事项,需要的朋友参考一下 官网方法实例: 试了一下,然后发现会报draw方法找不到之类的,可能是因为版本问题,用的是1.12.10版本的。 所以又发现有热心网友分享一下方法,是可以的。 定义{"data": null,"targets": 0},一个空列,然

  • 我不知道如何正确地连接这个插头,有人能帮助我吗? webpack.config.js如下所示;https://gist.github.com/marcingolenia/2fa78ed2cd42f9294da5edd22d351245 我希望这条线能解决问题;