dataTable的一些参数

DataTables高级配置
本文详细介绍DataTables插件的高级配置参数,包括数据处理、显示设置、分页与排序功能等,帮助开发者掌握复杂数据展示的定制化技巧。

$('#table_id').DataTable({
'dom': '<'top'iflp<'clear'>>rt<'bottom'iflp<'clear'>>', //在表格上面和下面同时显示长度菜单,分页菜单和搜索框
'bProcessing' : true, //DataTables载入数据时,是否显示‘进度’提示
'bServerSide' : true, //是否启动服务器端数据导入
'bStateSave' : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
'bJQueryUI' : true, //是否使用 jQury的UI theme
'sScrollY' : 450, //DataTables的高
'sScrollX' : 820, //DataTables的宽
'aLengthMenu' : [20, 40, 60], //更改显示记录数选项
'iDisplayLength' : 40, //默认显示的记录数
'bAutoWidth' : false, //是否自适应宽度
'bScrollInfinite' : false, //是否启动初始化滚动条
'bScrollCollapse' : true, //是否开启DataTables的高度自适应,当数据条数不够分页数据条数的时候,插件高度是否随数据条数而改变
'bPaginate' : true, //是否显示(应用)分页器
'bInfo' : true, //是否显示页脚信息,DataTables插件左下角显示记录数
'sPaginationType' : 'full_numbers', //详 细分页组,可以支持直接跳转到某页
'bSort' : true, //是否启动各个字段的排序功能
'aaSorting' : [[1, 'asc']], //默认的排序方式,第2列,升序排列
'bFilter' : true, //是否启动过滤、搜索功能
'aoColumns' : [{
'mDataProp' : 'USERID',
'sDefaultContent' : '', //此列默认值为'',以防数据中没有此值,DataTables加载数据的时候报错
'bVisible' : false //此列不显示
}, {
'mDataProp' : 'USERNAME',
'sTitle' : '用户名',
'sDefaultContent' : '',
'sClass' : 'center'
}, {
'mDataProp' : 'EMAIL',
'sTitle' : '电子邮箱',
'sDefaultContent' : '',
'sClass' : 'center'
}, {
'mDataProp' : 'MOBILE',
'sTitle' : '手机',
'sDefaultContent' : '',
'sClass' : 'center'
}, {
'mDataProp' : 'PHONE',
'sTitle' : '座机',
'sDefaultContent' : '',
'sClass' : 'center'
}, {
'mDataProp' : 'NAME',
'sTitle' : '姓名',
'sDefaultContent' : '',
'sClass' : 'center'
}, {
'mDataProp' : 'ISADMIN',
'sTitle' : '用户权限',
'sDefaultContent' : '',
'sClass' : 'center'
}],
bAutoWidth:true, //自动宽度
scrollY: 300,//垂直滚动条
scrollX :300, //水平滚动条
'scrollCollapse': 'true',//滚动条
paging: true,//是否分页 */
searching: true,//搜索框
ordering: true, //排序
'info': false, //下拉框,每页显示的内容
stateSave: true, //可以保存最后一次分页信息、排序信息,当页面刷新,或者重新进入这个页面,恢复上次的状态。
'pagingType': 'full_numbers', //分页按钮的插件,'full_numbers' 除首页、上一页、下一页、末页四个按钮还有页数按钮,full - 有四个按钮首页、上一页、下一页、末页 simple_numbers - 除了上一页、下一页两个按钮还有页数按钮,Datatables默认是这个,simple - 只有上一页、下一页两个按钮
'thousands':'.', //千位以点号隔开
'decimal':',', //小数点以逗号隔开
'ajax': '../ajax/data/objects.txt' ,
//跟数组下标一样,第一列从0开始,这里表格初始化时,第四列默认降序
'order': [[ 3, 'desc' ]]

<think>嗯,用户想了解jQuery DataTable参数及其功能。我之前看过几个相关的引用,特别是引用3提到了参数的一些基本说明,但用户需要更详细的介绍。首先,我需要整理DataTable的常用参数,并按照功能分类,比如分页、搜索、列配置等。 用户提供的引用1提到了官方文档,但用户可能希望直接得到中文解释,所以应该用简单的中文说明每个参数的作用。例如,引用2中的sPaginationType是分页类型,可以设置不同的分页样式。另外,引用3提到了一些参数如Starting position和End position,这些可能和服务器端分页有关。 接下来,我需要确保每个参数都正确对应到功能,比如paging控制是否分页,searching控制搜索框是否显示。同时,注意参数的大小写,比如info是否显示表格信息。可能需要提到一些高级配置,如serverSide处理大数据量,ajax用于异步加载数据。 还要注意用户可能遇到的常见问题,比如分页样式不生效,或者服务器端配置不正确。需要给出示例代码,帮助用户理解如何使用这些参数。例如,引用2中的代码示例展示了如何设置分页类型为full_numbers,这可以作为参考。 最后,生成相关问题时要考虑用户可能深入的问题,比如性能优化、事件处理或样式自定义。确保覆盖用户可能需要的进一步信息,帮助他们全面了解DataTable的配置选项。</think>以下是jQuery DataTable核心参数及其功能的分类解析,结合官方文档与开发实践总结: ### 一、基础配置参数 1. **分页控制** - `paging`: 控制分页功能开关(默认true),设置为false时禁用分页 ```javascript $('#example').dataTable({ "paging": false }); ``` - `pageLength`: 设置每页显示行数(默认10),支持动态修改 - `sPaginationType`: 分页样式类型(默认"two_button"),可选"full_numbers"显示完整页码[^2] 2. **搜索与过滤** - `searching`: 控制搜索框显示(默认true) - `search`: 初始化搜索条件,如`search: { "search": "上海" }`预填搜索内容 - `filter`: 控制是否启用列过滤(默认true) 3. **信息显示** - `info`: 控制表格信息栏(默认true),显示"显示第X至Y项,共Z项"等信息 - `lengthChange`: 控制分页长度选择器(默认true) ### 二、高级功能参数 1. **服务器端处理** ```javascript $('#example').dataTable({ "serverSide": true, "ajax": "/api/data" }); ``` - `serverSide`: 启用服务器模式处理大数据量(默认false) - `processing`: 显示加载提示(默认false) 2. **列配置参数** ```javascript "columns": [ { "data": "id", "visible": false }, { "data": "name", "orderable": false } ] ``` - `data`: 绑定数据字段 - `orderable`: 是否允许列排序(默认true) - `visible`: 控制列初始可见性(默认true) - `width`: 设置固定列宽(如"20%") 3. **国际化配置** ```javascript "language": { "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Chinese.json" } ``` ### 三、回调函数(示例) ```javascript "drawCallback": function(settings) { console.log('表格重绘完成'); }, "initComplete": function(settings, json) { console.log('初始化完成'); } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值