商业源码 jquery datatables 每页多少条？
每页多少条是由自己定义的。
具体定义代码如下：
$(document)ready(function() {$('#example')dataTable( {
"aLengthMenu": [[10, 25, 50, -1], ["10条", "25条", "50条", "All"]];//二组数组，第一组数量，第二组说明文字;
"aLengthMenu": [10, 25, 50, -1];//也可以直接用一维数组设置数量
} );
} );
只需要修改数组的第一维数组的第一个元素的数值，这个数值决定每页的条数。
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
具有许多良好的特性：
分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 （ MIT license ）！ 商业支持
参考 http://wwwdatatablesclub/reference/option/domhtml
默认dom的取值为 lrtip ，可以为dom添加其他元素， 或修改位置， 如上实例。
Datatables会添加一些控制元素在表格的周围，比如默认状态下改变每页显示条数（l）的空间在左上角，即使搜索框（f）在右上角，表格的信息（i）显示在左下角，分页控件（p）显示在右下角。 这些控件在给大家带来便利的同时，也可能出现困惑。比如我想把l放在i的后面，我想表格的上下都有p，我想加入自己的控件放在l的后面……这些太多了，那么下面就给大家介绍怎么去使用dom属性配置已经自定义。
上面我已经用了一些英文字母标注在每个控件的后面，开始看肯定会有些疑惑，或者不熟悉，不要着急，我来告诉大家这些到底是什么
作者为了适应我们所说的这些情况，已经考虑到了，所以有这么强大的dom属性。那么作者定义了如下字母：
这些字母你可以理解为一个标签，dt会自动把这些字母替换成相应的控件，就想模板一样。上面的这些元素 l、f、t、i、p、r除了t只能指定一次，其他的均可多次指定。
下面还有两个字母是应用到jQueryUI上的，不过作者推荐在110甚至111版本中不去使用他，通过使用 jQueryUIOption 来分离开
最后，你也可以添加插件给Datatables，指定新的字母。比如 TableTools 就是添加了 T 来表示。在dom里指定之后，相应的按钮就添加到表格上了
注意：dom的用法可能还不是很简单，希望在111版本的计划中更加优化这个参数的使用，让表格定位更简单
这个可以参考如下内容:
JQuerydataTables表格插件添加跳转到指定页
一、解决方案
1添加自定义工具栏，嵌入文本框
[javascript] view plain copy
"dom": 'l<"toolbar">frtip', //自定义工具栏
[javascript] view plain copy
//设置工具栏内容
//l - length changing input control
//f - filtering input
//t - The table!
//i - Table information summary
//p - pagination control
//r - processing display element
[javascript] view plain copy
$("divtoolbar")html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red;">页</b>');
2监听文本框的change事件，执行插件的调转页面方法
[javascript] view plain copy
//调转到指定页面索引 ，注意大小写
var oTable = $('#example1')dataTable();
oTablefnPageChange(page);
3插件绘制成功后，绑定文本框的值
[javascript] view plain copy
//绘制的时候触发，绑定文本框的值
tableon('drawdt', function (e, settings, data) {
var info = tablepageinfo();
//此处的page为0开始计算
consoleinfo('Showing page: ' + infopage + ' of ' + infopages);
$('#searchNumber')val(infopage + 1);
});
二、完整示例代码
[html] view plain copy
<table id="example1" class="table table-hover table-striped">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>班级</th>
</tr>
</thead>
</table>
[javascript] view plain copy
$(function () {
//注意方法名为DataTable
var table = $('#example1')DataTable({
"dom": 'l<"toolbar">frtip', //自定义工具栏
"pagingType": "full_numbers",
lengthMenu: [3, 5, 10],
processing: true,//是否使用进度条
serverSide: true,//是否启用数据库加载
ajax: {
url: '/tableone/getlist',
type: 'post',
data: function (d) {
dname = '张三';
/
自定义aja参数
特别说明，此处可以重写控件的默认参数，比如分页参数
/
// dstart = 0;
//consoleinfo(d);
//var page = $('#searchNumber')val();
//page = parseInt(page) || 1;
//dstart = (page - 1) dlength;
}
},
//指定列绑定的字段
columns: [
{ data: 'sno' },
{ data: 'sname' },
{ data: 'ssex' },
{ data: 'sbirthday' },
{ data: 'class' }
],
order: [
[3, 'desc']
]
});
$("divtoolbar")html(' <b style="color:red">跳转第</b><input id="searchNumber"/><b style="color:red;">页</b>');
//绑定分页事件----在切换分页的时候触发
//tableon('pagedt', function () {
// var info = tablepageinfo();
// consoleinfo('Showing page: ' + infopage + ' of ' + infopages);
//});
//绘制的时候触发，绑定文本框的值
tableon('drawdt', function (e, settings, data) {
var info = tablepageinfo();
//此处的page为0开始计算
consoleinfo('Showing page: ' + infopage + ' of ' + infopages);
$('#searchNumber')val(infopage + 1);
});
//监听文本框更改
$('#searchNumber')change(function () {
var page = $(this)val();
page = parseInt(page) || 1;
page = page - 1;
//调转到指定页面索引 ，注意大小写
var oTable = $('#example1')dataTable();
oTablefnPageChange(page);
});
});
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
主要功能
分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 （ MIT license ）！ 商业支持
更多特性请到官网查看
这里主要讲一下DataTable使用Ajax来获取数据并且动态加载dom的方法。这样也方便了数据管理，也避免了HTML页面中大量的tr，看起来很凌乱。
0条评论