[插件]datatables,一款强大的基于jquery的表格插件

首页 / 图解小知识 | 2022-02-22 06:32:37 点击:0

datatables插件可以根据项目开发需要设置不同的参数属性选项(查看datatables的属性),详细的手册请访问官网(http://datatables.net/)参阅,久久经验网仅把在实际项目开发常用的方法供大家参考。

  1. $("#datatable").dataTable({//table的id 
  2.     "data":jsonData,//引入json数据对象 
  3.     "columns":[ 
  4.         {"data": 'name',"sTitle":'姓名',"sClass":'fb center'},//sClass自定义样式 
  5.         {"data": 'age',"sTitle":'年龄'}, 
  6.         {"data": 'love',"sTitle":'爱好'}, 
  7.         {"data": 'email',"sTitle":'Email'}, 
  8.         {"data": 'tel',"sTitle":'电话'}, 
  9.         {"data": 'qq',"sTitle":'QQ'}, 
  10.         //插入一个操作列 
  11.         { 
  12.             "sTitle":'操作', 
  13.             "mDataProp": "id", 
  14.             "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {//参数:DOM, id, object对象, 当前所在行,当前所在列 
  15.                 $(nTd).addClass('center').html('编辑  '+
  16. '删除');//oData.id,获取json对象里的id 
  17.             } 
  18.         },           
  19.     ], 
  20.     "bPaginate": true, //翻页功能 
  21.     "bLengthChange": true, //改变每页显示数据数量 
  22.     "bFilter": true, //过滤功能 
  23.     "bSort": true, //排序功能 
  24.     "bInfo": true,//页脚信息 
  25.     "bAutoWidth": true,//自动宽度 
  26.     //"iDisplayLength": 20,//默认显示的记录数 
  27.     //"aaSorting": [[ 4, "desc" ]],//设置第5个元素为默认排序   
  28.     "oLanguage": { 
  29.         //"sUrl":"language.txt",//读取语言包 
  30.         "sLengthMenu": "每页显示 _MENU_ 条", 
  31.         "sZeroRecords": "没有找到符合条件的数据", 
  32.         "sProcessing": "正在获取数据,请稍后…", 
  33.         "sInfo": "当前第 _START_ - _END_ 条 共计 _TOTAL_ 条", 
  34.         "sInfoEmpty": "没有检索到数据", 
  35.         "sInfoFiltered": "(从 _MAX_ 条数据中检索)", 
  36.         "sSearch": "搜索:", 
  37.         "oPaginate": { 
  38.             "sFirst": "首页", 
  39.             "sPrevious": "前一页", 
  40.             "sNext": "后一页", 
  41.             "sLast": "尾页" 
  42.         } 
  43.     }, 
  44.     //"sPaginationType":"full_numbers",//分页样式 
  45.     "sDom":'<"top"fl<"clearfix">>rt<"bottom"ip<"clearfix">>', 
  46.     //"bStateSave": true,//开启cookie(缺省false) 
  47.     "aoColumnDefs": [//参数作用:屏蔽由于json中不存在指定字段抛出的错误警告提示 
  48.         { 
  49.             "sDefaultContent": '',//当没有相关数据时 
  50.             "aTargets": [ '_all' ] 
  51.             //"sVisible":false//此列不显示 
  52.         } 
  53.     ] 
  54. }); 

当然,基于jquery的datatables插件其功能不止于这些,还有更多功能需要我们去挖掘!

datatables官网是**的,**目前也有人在翻译,中文版:http://dt.thxopen.com/index.html(有些demo还在完善中…)。

对datatables感兴趣却不清楚datatables的使用方法?别急,欢迎加群讨论(239274519)或在线留言。

原创文章转载请注明出处!原文链接:https://www.exp99.com/jswz/f2e/datatables.html


本站声明:本站部分文章来自网络,由用户上传分享,如若内容侵犯了您的合法权益,可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。

评论(0)
*评论只允许汉字和全角中文标点符号。 ? ! ,等
相关标签

推荐相关
相关图片
图集标签

标签索引

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

文章索引

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

关注用户
QQ皮肤 | 唯美图片 | 闪图 | 女生头像 | 女生图片 | 文字图片 | 爱情图片 | 素材图片 | 非主流图片 | 伤感图片 | 游戏图片 | QQ表情 | 流光字 | qq相册封面拼图 | 小清新图片 | lomo图片 | 美女 | 搞笑图片 | 美文 | 卡通图片 | 原创投稿 | 植物图片 | 动物图片 | 风景图片 | 二次元 | 古风图片 | 美食图片 | 手工制作 | 动漫图片 | 手工折纸 | 废物利用 | 儿童手工 | 可爱图片 | 插画 | 欧美图片 | 头像 | 男生头像 | 情侣头像 | 欧美头像 | 卡通头像 | qq说说 | 伤感说说 | 爱情说说 | 搞笑说说 | 心情说说 | 经典说说 | 图片说说 | 纹身图案 | 可爱头像 | 娱乐圈 | 明星图片 | 娱乐八卦 | 影视剧照 | 摄影图片 | 儿童图片 | 女孩图片 | 男孩图片 | 宝宝图片 | cosplay图片 | 图解小知识 | 美女写真 | 性感美女 | 美女校花 | 游戏美女 | 韩国美女 | 清纯美女 | 内衣美女 | 制服美女 | **** | 欧美美女 | 美女模特 | 美女私房 | 电脑壁纸 | 影视壁纸 | 明星壁纸 | 美女壁纸 | 节日壁纸 | 游戏壁纸 | 卡通动漫 | 美食壁纸 | 风景壁纸 | 动物壁纸 | 设计创意 | 汽车壁纸 | 日历壁纸 | 植物壁纸 | 广告壁纸 | 家居壁纸 | 军事壁纸 | 体育壁纸 | 风格壁纸 | 手机壁纸 | 动漫 | 美女 | 明星 | 游戏 | 影视 | 汽车 | 风景 | 唯美 | 植物 | 动物 | 可爱 | 节日 | 卡通 | 创意 | 非主流 | 苹果 | 搞笑 | 爱情 | 动态 | 风格 | 体育 | 美食 | 萌表情 | 文案 范文 曲谱大全 | 美声曲谱 | 合唱曲谱 | 少儿曲谱 | 外国曲谱 | 戏曲曲谱 | 民歌曲谱 | 通俗曲谱 | 器乐乐谱 | 原创曲谱 | 谱友园地 | 个人曲谱 | 吉他乐谱 | 电子琴谱 | 钢琴乐谱 | 胡琴乐谱 | 葫芦丝等 | 琵琶乐谱 | 其他乐谱 | 笛箫乐谱 | 古筝古琴 | 铜管乐谱 | 提琴乐谱 | 长笛乐谱 | 手风琴谱 | 萨克斯谱 | 口琴乐谱 | 扬琴乐谱 | 图说养生 | 运动养生 | 春季养生 | 女性健康 | 夏季养生 | 疾病预防 | 秋季养生 | 养生小妙招 | 减肥瘦身 | 冬季养生 | 母婴保健 | 24节气养生 | 生活常识 | 孕妇养生 | 小偏方 | 幼儿养生 | 美容护肤 | 老人养生 | 中医养生 | 饮食指南 | 青少年养生 | 饮食指南 | 女性养生 | 男性养生 | 白领养生 | 男性健康 | 两性保健 | 生活禁忌 | 穴位养生 | 两性健康 | 风景头像 | 心理健康 | 养生资讯 | 评测 | 图说花草 | 养花知识 | 花卉诊疗 | 植物百科 | 图说娱乐 | 明星 | 影视 | 综艺 | 八卦 | 爆料 | 花边 | 趣事 | 日韩 | 剧情 | 图说女性 | 时尚美妆 | 整容知识 | 丰胸** | 美体知识 | 时尚穿搭 | 化妆技巧 | 发型设计 | 护肤知识 | 美**选 | 保养技巧 | 时尚包包 | 女士内衣 | 运动健身 | 图说社会 | 旅游 | 百态 | 创业 | 职场 | 军事 | 情感 | 健康 | 美食 | 问答 | 图说知识 | 生活 | 资讯 | 影视 | 女性 | 旅游 | 汽车 | 吃喝 | 科技 | 教学 | 食谱 | 特产 | 功效与作用 | 美食 | | 烘焙 | 手机数码 | win7 | word | Excel | 电脑操作 | Photoshop | win10 | PowerPoint | 数码 | 教育 | 手抄报 | 简笔画 | 简笔画大全 | 故事 | 折纸 | 节日节气 | 历史 | 优品 | 家居知识 | 家居 | 母婴 | 星座 | 街拍 | 图说排名 | 生活 | 旅游 | 娱乐 | 城市 | ** | 教育 | 科技 | 行业 | 军事 | 人物 | 体育 | 图说亲子 | 备孕 | 孕期 | 分娩 | 产后 | 新生儿 | 幼儿 | 婴儿 | 早教 | 儿童 | 用品 | 图说发型 | 女生 | 波波头 | 丸子头 | 花苞头 | 男生 | 编发 | 长发 | 圆脸 | 大脸 | 马尾辫 | 蜈蚣辫 | 麻花辫 | 梨花头 | 盘发 | 卷发 | 直发 | 短发 | 刘海 | 非主流 | 夏季 | 发髻 | 纹理烫 | 荷叶头 | 韩式 | 胖脸 | 娃娃脸 | 瓜子脸 | 长脸 | 方脸 | 欧美头像 | 个性头像 | 唯美头像 | 文字头像 | 带字头像 | 伤感头像 | 黑白头像 | 霸气头像 | 超拽头像 | 颓废头像 | 清新头像 | 意境头像 | 背影头像 | 抽烟头像 | 搞笑头像 | 小孩头像 | 游戏头像 | 动物头像 | 汽车头像 | 超萌头像 | 创意头像 | 静物头像 | 非主流头 | 星座头像 | 植物头像 | 节日头像 | 另类头像 | 手绘头像 | 纹身头像 | 明星头像 | 人物头像 | 建筑头像 | 恐怖头像 | 古风头像 | 励志头像 | 风水头像 | 姓氏头像 | 动态头像 | 群头像 | 家用电器 | 手机数码 | 护肤美妆 | 服装饰品 | 食品特产 | 母婴用品 | 时尚生活 | 探索发现 | 科学探寻 | 未解之谜 | 世界之最 | 历史趣闻 | 宇宙探索 | 猎奇八卦 | 世界十大 | 奇异生物 | 图说理财