Data Tables: http://datatables.net/
Version: 1.10.0
Dom说明
定义表格控件在页面的显示顺序。
每个控件元素在数据表都有一个关联的单个字母。
-
l
- 每页显示行数的控件 -
f
- 检索条件的控件 -
t
- 表格控件 -
i
- 表信息总结的控件 -
p
- 分页控件 -
r
- 处理中的控件
还可以在控件元素外添加DIV和Class,语法如下
-
<
and>
- DIV元素 -
<"class"
and>
- DIV和Class -
<"#id"
and>
- DIV和ID
Language说明
数据表的文言设置。
参数文档:
{ "emptyTable": "No data available in table", "info": "Showing _START_ to _END_ of _TOTAL_ entries", "infoEmpty": "Showing 0 to 0 of 0 entries", "infoFiltered": "(filtered from _MAX_ total entries)", "infoPostFix": "", "thousands": ",", "lengthMenu": "Show _MENU_ entries", "loadingRecords": "Loading...", "processing": "Processing...", "search": "Search:", "zeroRecords": "No matching records found", "paginate": { "first": "First", "last": "Last", "next": "Next", "previous": "Previous" }, "aria": { "sortAscending": ": activate to sort column ascending", "sortDescending": ": activate to sort column descending" } }
Example:
- 没有检索元素
/* Results in: <div class="wrapper"> {length} {processing} {table} {information} {pagination} </div> */ $('#example').dataTable( { "dom": 'lrtip' } );
- 简单的DIV和样式元素设置
/* Results in: <div class="wrapper"> {filter} {length} {information} {pagination} {table} </div> */ $('#example').dataTable( { "dom": '<"wrapper"flipt>' } );
- 每页行数,检索条件,分页在表格上面,表信息在表格下面
/* Results in: <div> {length} {filter} <div> {table} </div> {information} {pagination} </div> */ $('#example').dataTable( { "dom": '<lf<t>ip>' } );
- 表信息在表上面,检索条件,每页行数,处理中在表下面,并且有清除元素
/* Results in: <div class="top"> {information} </div> {processing} {table} <div class="bottom"> {filter} {length} {pagination} </div> <div class="clear"></div> */ $('#example').dataTable( { "dom": '<"top"i>rt<"bottom"flp><"clear">' } );
- 实际应用
/**
<style>
.float_left{
float: left;
}
.float_right {
float:right;
}
</style>
*/ $('#dealsData').dataTable( { 'dom': '<"float_left"f>r<"float_right"l>tip', 'language': { 'emptyTable': '没有数据', 'loadingRecords': '加载中...', 'processing': '查询中...', 'search': '检索:', 'lengthMenu': '每页 _MENU_ 件', 'zeroRecords': '没有数据', 'paginate': { 'first': '第一页', 'last': '最后一页', 'next': '', 'previous': '' }, 'info': '第 _PAGE_ 页 / 总 _PAGES_ 页', 'infoEmpty': '没有数据', 'infoFiltered': '(过滤总件数 _MAX_ 条)' } } );效果图片
相关推荐
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
官方下载 datatables所需包文件
jquery dataTables两种版本 jquery两种版本 及相关css
jQuery Datatables
JQuery DataTables示例,包含分页、拖拽、导出,前端、后台分页都有,项目直接导入就可以使用,项目框架是struts2写Web项目。
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了...dataTables 的网站上也提供了大量的演示和详细的文档进行说明,但是官网是PHP的例子,特意做了一个asp.net的例子,以Northwind数据库的Customers表为数据源
eclipse里面运行的简单组件,通过读取TXT文件显示在页面上,加入bootstrap
使用JQuery.Datatables再也不用烦恼了,非常方便的集成插件,还是老外牛叉啊!
jquery1.6 datatables插件1.8 附带例子 API等 WEB页面显示列表,课排序 列过滤 隐藏列等功能
jquery datatables前后台数据交互分页实例。
仿jquery.dataTables的分页(查询+排序),jquery插件式开发简单示例。
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,包括排序、分页、扩展、主题、国际化等
Jquery dataTables插件 支持静态分页 排序 固定表头 ajax事件 等等 简单易上手
避免由于session失效,引发DataTable向后台发送ajax请求时弹窗报错而不是重定向到指定页面,详情https://blog.csdn.net/xssl_CSDN/article/details/83660015
里面是jquery.dataTables的引用包。使用简单,只需要引用js和css的包在家一个html文件即可,使用方法笔记里面有。
jquery-datatables-rails, 用于 Rails的jquery数据表 gem jquery-datatables-rails 这个 gem 为 jQuery DataTables插件提供了方便,以便与 Rails 资产pipleine结合使用。 它提供所有基本的datatable文件,以及一些...
在用jquery datatables开发,它的在线帮助打开很慢,很影响工作,就做了这个离线文档以便使用,特分享一下,随便挣几个工分下载时用
挺好用的表格插件, 官网地址:http://www.datatables.net/
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
工作需要用到jquery dataTables。 网上找不到这样的例子,只好我自已整理一份了。 该demo包含8个可以运行的最简单的个例子。 希望能对大家有帮助。