JQuery Datatables Dom 和 Language 参数详细说明

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

Dom说明

定义表格控件在页面的显示顺序。

每个控件元素在数据表都有一个关联的单个字母。

  • l - 每页显示行数的控件
  • f - 检索条件的控件
  • t - 表格控件
  • i - 表信息总结的控件
  • p - 分页控件
  • r - 处理中的控件

还可以在控件元素外添加DIV和Class，语法如下

  • < and > - DIV元素
  • <"class" and > - DIV和Class
  • <"#id" and > - DIV和ID

Language说明

数据表的文言设置。

参数文档：

 

Js代码  收藏代码
  1. {  
  2.     "emptyTable":     "No data available in table",  
  3.     "info":           "Showing _START_ to _END_ of _TOTAL_ entries",  
  4.     "infoEmpty":      "Showing 0 to 0 of 0 entries",  
  5.     "infoFiltered":   "(filtered from _MAX_ total entries)",  
  6.     "infoPostFix":    "",  
  7.     "thousands":      ",",  
  8.     "lengthMenu":     "Show _MENU_ entries",  
  9.     "loadingRecords": "Loading...",  
  10.     "processing":     "Processing...",  
  11.     "search":         "Search:",  
  12.     "zeroRecords":    "No matching records found",  
  13.     "paginate": {  
  14.         "first":      "First",  
  15.         "last":       "Last",  
  16.         "next":       "Next",  
  17.         "previous":   "Previous"  
  18.     },  
  19.     "aria": {  
  20.         "sortAscending":  ": activate to sort column ascending",  
  21.         "sortDescending": ": activate to sort column descending"  
  22.     }  
  23. }  

 

 

 

 

 

Example：

  • 没有检索元素
Js代码  收藏代码
  1. /* Results in: 
  2.     <div class="wrapper"> 
  3.       {length} 
  4.       {processing} 
  5.       {table} 
  6.       {information} 
  7.       {pagination} 
  8.     </div> 
  9. */  
  10. $('#example').dataTable( {  
  11.   "dom": 'lrtip'  
  12. } );  

 

  • 简单的DIV和样式元素设置
Js代码  收藏代码
  1. /* Results in: 
  2.     <div class="wrapper"> 
  3.       {filter} 
  4.       {length} 
  5.       {information} 
  6.       {pagination} 
  7.       {table} 
  8.     </div> 
  9. */  
  10. $('#example').dataTable( {  
  11.   "dom": '<"wrapper"flipt>'  
  12. } );  
  •  每页行数，检索条件，分页在表格上面，表信息在表格下面

 

Js代码  收藏代码
  1. /* Results in: 
  2.     <div> 
  3.       {length} 
  4.       {filter} 
  5.       <div> 
  6.         {table} 
  7.       </div> 
  8.       {information} 
  9.       {pagination} 
  10.     </div> 
  11. */  
  12. $('#example').dataTable( {  
  13.   "dom": '<lf<t>ip>'  
  14. } );  

 

  •  表信息在表上面，检索条件，每页行数，处理中在表下面，并且有清除元素

 

 

Js代码  收藏代码
  1. /* Results in: 
  2.     <div class="top"> 
  3.       {information} 
  4.     </div> 
  5.     {processing} 
  6.     {table} 
  7.     <div class="bottom"> 
  8.       {filter} 
  9.       {length} 
  10.       {pagination} 
  11.     </div> 
  12.     <div class="clear"></div> 
  13. */  
  14. $('#example').dataTable( {  
  15.   "dom": '<"top"i>rt<"bottom"flp><"clear">'  
  16. } );  

 

  • 实际应用

 

Js代码  收藏代码
  1. /**  

  <style>

  .float_left{

  float: left;

  }

  .float_right {

  float:right;

  }

  </style>

Js代码  收藏代码
  1. */  
  2.     $('#dealsData').dataTable(  
  3.         {  
  4.             'dom': '<"float_left"f>r<"float_right"l>tip',  
  5.             'language': {  
  6.                 'emptyTable': '没有数据',  
  7.                 'loadingRecords': '加载中...',  
  8.                 'processing': '查询中...',  
  9.                 'search': '检索:',  
  10.                 'lengthMenu': '每页 _MENU_ 件',  
  11.                 'zeroRecords': '没有数据',  
  12.                 'paginate': {  
  13.                     'first':      '第一页',  
  14.                     'last':       '最后一页',  
  15.                     'next':       '',  
  16.                     'previous':   ''  
  17.                 },  
  18.                 'info': '第 _PAGE_ 页 / 总 _PAGES_ 页',  
  19.                 'infoEmpty': '没有数据',  
  20.                 'infoFiltered': '(过滤总件数 _MAX_ 条)'  
  21.             }  
  22.         }  
  23.     );  

效果图片

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/452044.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

程序员的思维修炼》读书笔记

程序员的思维修炼》读书笔记

PB15061359 王亚正 这本书主要是从思维角度上来写的&#xff0c;不具体针对到程序员如何写代码。我觉得这本书不仅仅适合程序员&#xff0c;其他对各行各业的人都同样适用。 书中首先讲了新手和专家的区别&#xff0c;一个需要靠规则&#xff0c;另一个则是靠感觉。 之后介绍了…
阅读更多...
网络爬虫--10.使用正则表达式的爬虫

网络爬虫--10.使用正则表达式的爬虫

文章目录一. 前言二. 第一步&#xff1a;获取数据三. 第二步&#xff1a;筛选数据四. 第三步&#xff1a;保存数据五. 第四步&#xff1a;实现循环抓取一. 前言 现在拥有了正则表达式这把神兵利器&#xff0c;我们就可以进行对爬取到的全部网页源代码进行筛选了。 下面我们一…
阅读更多...
一对一 一对多 多对多

一对一 一对多 多对多

一对一 例如&#xff0c;学校里一个班级只有一个正班长&#xff0c;而一个班长只在一个班中任职&#xff0c;则班级与班长之间具有一对一联系。 一对多 例如&#xff0c;一个班级中有若干名学生&#xff0c;而每个学生只在一个班级中学习&#xff0c;则班级与学生之间具有一…
阅读更多...
Mac下的Jenkins安装

Mac下的Jenkins安装

安装方式 1&#xff09;通过命令行安装 brew install jenkins&#xff0c;可能会遇到先更新 brew 的情况 https://brew.sh/index_zh-cn&#xff1b; 2&#xff09;通过 pkg 安装&#xff0c;官方网址&#xff1a;https://jenkins.io/ 安装完成后&#xff0c;会自动打开浏览器…
阅读更多...
Order By 排序条件中带参数的写法（Oracle数据库、MyBatis）

Order By 排序条件中带参数的写法（Oracle数据库、MyBatis）

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 sortWay 是参数。 当sortWay 为 llpx 就 ORDER BY FORMAT ASC&#xff0c;为 btypx 就ORDER BY BID DESC &#xff0c;为 zhpx 就 ORDE…
阅读更多...
拼凑代码与编程

拼凑代码与编程

拼凑代码与编程&#xff08;Hacking Vs. Programming&#xff09;之间有什么不同&#xff1f;我听说过的一个观点是骇客可以在短时间内编许多代码&#xff0c;但是一旦发生变更&#xff0c;这些代码就要完全重写。而程序员也许会花更多的时间来编码&#xff0c;但发生变化的时候…
阅读更多...
实体间的联系

实体间的联系

&#xff08;1&#xff09;两个实体型之间的联系&#xff1a; ①一对一联系&#xff08;1∶1&#xff09; ②一对多联系&#xff08;1∶n&#xff09; ③多对多联系&#xff08;m∶n&#xff09; &#xff08;2&#xff09;两个以上的实体型之间的联系&#xff1a; 一般地…
阅读更多...
【文章】孝心无价 作者：毕淑敏

【文章】孝心无价 作者：毕淑敏

我不喜欢一个苦孩子求学的故事。家庭十分困难&#xff0c;父亲逝去&#xff0c;弟妹嗷嗷待哺&#xff0c;可他大学毕业后&#xff0c;还要坚持读研究生&#xff0c;母亲只有去卖血……我以为那是一个自私的学子。求学的路很漫长&#xff0c;一生一世的事业&#xff0c;何必太在…
阅读更多...
git源码安装

git源码安装

安装依赖yum -y install perl-ExtUtils-MakeMaker tcl libcurl-devel curl-devel expat-devel yum-y install gettext-devel openssl-devel zlib-devel libcurl4-openssl-dev xmlto yum -y install asciidoc docbook2X openjade texinfo perl-XML-SAX nss curlcd /usr/bin…
阅读更多...
chrome 开启 JSONview 方法，让json数据格式化显示

chrome 开启 JSONview 方法，让json数据格式化显示

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 在浏览器上作接口测试的时候看到json 格式的数据是密密麻麻的一片&#xff0c;眼睛都花了.. 如&#xff1a; 设置下chrome 浏览器就好了…
阅读更多...
联系的度

联系的度

联系的度&#xff1a;参与联系的实体型的数目 2个实体型之间的联系度为2&#xff0c;也称为二元联系&#xff1b; 3个实体型之间的联系度为3&#xff0c;称为三元联系&#xff1b; N个实体型之间的联系度为N&#xff0c;也称为N元联系
阅读更多...
Could not fetch URL https://pypi.org/simple/pip/: There was a problem confirming the ssl certificate

Could not fetch URL https://pypi.org/simple/pip/: There was a problem confirming the ssl certificate

安装jsonpath&#xff1a;>pip install jsonpath 报错&#xff1a;Could not fetch URL https://pypi.org/simple/pip/: There was a problem confirming the ssl certificate: HTTPSConnectionPool(host‘pypi.org’, port443): Max retries exceeded with url: /simple/p…
阅读更多...
百度贴吧10亿量级LAMP架构分享

百度贴吧10亿量级LAMP架构分享

导读&#xff1a;天下武功&#xff0c;唯快不破。对日益激烈的互联网竞争你所拥有的利器就是快&#xff01;本文来自百度贴吧的LAMP解决方案介绍&#xff0c;摘录至此旨在研究分享&#xff0c;看看其是如何全面支持快速迭代的。 文章内容如下&#xff1a; 贴吧是功能性产品&a…
阅读更多...
python基础-PyYaml操作yaml文件

python基础-PyYaml操作yaml文件

yaml语法 格式 它的基本语法规则如下 大小写敏感 使用缩进表示层级关系 缩进时不允许使用Tab键&#xff0c;只允许使用空格。 缩进的空格数目不重要&#xff0c;只要相同层级的元素左侧对齐即可 YAML 支持的数据结构有三种 1、对象&#xff1a;键值对的集合&#xff0c;又称为映…
阅读更多...
N1CTF 塞题vote分析

N1CTF 塞题vote分析

N1CTF 塞题vote分析&#xff1a;这个题是一个uaf的漏洞题&#xff0c;我们先看看漏洞&#xff08;如下图&#xff09;&#xff0c;这两部分是很明显的对比的啊。当单独的一个count数组的数据和堆里的数据相同时候&#xff0c;就会释放堆&#xff0c;堆释放后的count还会有指针指…
阅读更多...
String.valueOf()方法与toString()方法的区别

String.valueOf()方法与toString()方法的区别

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 两者都是把ObJect对象转化为String 类型。 2.string.valueof()方法有作非空判断&#xff0c;在内部也是调用的toString()方法&#…
阅读更多...
网络爬虫--11.XPath和lxml

网络爬虫--11.XPath和lxml

文章目录一. XML1. XML 和 HTML 的区别2. XML文档示例3. HTML DOM 模型示例4. XML的节点关系二. 什么是XPath&#xff1f;1. 选取节点2. 谓语&#xff08;Predicates&#xff09;3. 选取未知节点4. 选取若干路径5. XPath的运算符三. lxml库1. 初步使用2. 文件读取四. XPath实例…
阅读更多...
实体与属性间的划分原则

实体与属性间的划分原则

为了简化E-R图的处置&#xff0c;现实世界的事物能作为属性对待的&#xff0c;尽量作为属性对待。 两条准则&#xff1a; &#xff08;1&#xff09;作为属性&#xff0c;不能再具有需要描述的性质。属性必须是不可分的数据项&#xff0c;不能包含其他属性。 &#xff08;2&…
阅读更多...
编程开发之--java多线程学习总结（5）

编程开发之--java多线程学习总结（5）

4、对继承自Runnable的线程进行锁机制的使用 package com.lfy.ThreadsSynchronize;import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.ReentrantLock;public class TicketSellSolution4 implements Runnable {private static int num 50;//创建一个…
阅读更多...
软件测试不是一个功能

软件测试不是一个功能

今天在工作中我对一个同事说&#xff0c;PyDev 2.5.0现在对TDD&#xff08;测试驱动开发&#xff09;提供了很酷的支持了。我并不是一个对TDD很痴迷的倡导者&#xff0c;对其它事物也一样&#xff0c;但仍不免激起了一场讨论。这个家伙&#xff0c;让我们暂叫他约翰&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023