jQuery表格插件datatables用法汇总

站长资源 2024/12/1 佚名

2 0 1

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="/UploadFiles/2021-04-02/jquery.dataTables.js">

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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“jQuery表格插件datatables用法汇总”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月01日

jQuery表格插件datatables用法汇总

nodeJs爬虫获取数据简单实现代码

基于javascript实现tab切换特效

评论“jQuery表格插件datatables用法汇总”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接