网站设计公司报价,app开发团队公司,滨州网站建设 中企动力,常用的网站建设程序有哪些datatables 使用
一、简介 官网#xff1a;https://datatables.net/ 中文官网#xff1a;http://datatables.club/ Datatables是一款jquery表格插件。它是一个高度灵活的工具#xff0c;可以将任何HTML表格添加高级的交互功能。
分页#xff0c;即时搜索和排序几乎支持任…datatables 使用
一、简介 官网https://datatables.net/ 中文官网http://datatables.club/ Datatables是一款jquery表格插件。它是一个高度灵活的工具可以将任何HTML表格添加高级的交互功能。
分页即时搜索和排序几乎支持任何数据源DOM javascript Ajax 和 服务器处理支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation各式各样的扩展: Editor, TableTools, FixedColumns ……丰富多样的option和强大的API支持国际化超过2900个单元测试免费开源 二、使用
1、引入相关js和css文件
!-- DataTables CSS --
link relstylesheet typetext/css hrefhttp://cdn.datatables.net/1.10.15/css/jquery.dataTables.css
!-- jQuery --
script typetext/javascript charsetutf8 srchttp://code.jquery.com/jquery-1.10.2.min.js/script
!-- DataTables --
script typetext/javascript charsetutf8 srchttp://cdn.datatables.net/1.10.15/js/jquery.dataTables.js/script2、添加HTML代码
table idtable_id_example classdisplaytheadtrthColumn 1/ththColumn 2/th/tr/theadtbodytrtdRow 1 Data 1/tdtdRow 1 Data 2/td/trtrtdRow 2 Data 1/tdtdRow 2 Data 2/td/tr/tbody
/table3、初始化Datatables
$(document).ready( function () {$(#table_id_example).DataTable();
} );4、效果 三、常用选项
order 应用于表的初始顺序排序 # 参数1 列索引按顺序排列 从0开始
# 参数2 排序的规则
order: [[ 1, asc/desc ],...]stateSave 状态保存 - 页面重新加载时恢复表状态 启用或禁用状态保存。启用后DataTables将存储状态信息例如分页位置显示长度过滤和排序。当最终用户重新加载页面时表的状态将被更改以匹配他们之前设置的状态。 # 默认值 false
stateSave: true/falsecolumnDefs 设置列定义初始化属性 此参数允许您为表中的列指定特定选项但在这种情况下定义的列选项可应用于一个或多个列 columnDefs:[# 索引0列和第8列不进行排序{targets:[0,8],orderable:false}
]lengthMenu 定义在每页显示记录数的select中显示的选项 $(#example).DataTable({lengthMenu: [ 10, 25, 50, 75, 100 ]
});
# 或
$(#example).DataTable({lengthMenu: [ [10, 25, 50, -1], [10, 25, 50, 所有] ]
});paging 是否允许表格分页 true/false 默认true info 控制是否显示表格的信息 true/false 默认true searching 是否允许Datatables开启本地搜索 true/false 默认true ordering 是否允许Datatables开启排序 true/false 默认true processing 是否显示正在处理的状态 true/false 默认false 四、Ajax使用远程数据 有时从DOM读取数据太慢或太笨重特别是在处理数千或数百万个数据行时。为了解决这个问题DataTables的服务器端处理功能提供了一种方法可以让服务器端的数据库引擎完成所有“繁重的工作” 。 当使用服务器端处理时DataTables将在页面上每次绘制信息时向服务器发出Ajax请求即在分页排序搜索等时。DataTables将向服务器发送许多变量以允许它执行所需的处理然后以DataTables所需的格式返回数据。 1、客户端
$(#example).DataTable( {// 开启服务器模式serverSide: true,// ajax发起请求ajax: {// 请求地址url: /data-source,// 请求方式 get/posttype: POST,// 头信信息 laravel post请求时 csrfheaders: { X-CSRF-TOKEN : {{ csrf_token() }} },// 请求的参数data: {user_id: 451},/*// 两者写法效果一致 但是它用于搜索data: function ( d ) {d.user_id $(#user_id).val();}*/},// columns要对tr中的td单元格中的内容进行数据填充// 注意如果data接收类似a或b的信息实际服务器没有返回该信息那么一定要同时设置defaultContent属性否则报错columns: [// 总的数量与表格的列的数量一致不多也不少// 字段名称与sql查询出来的字段时要保持一致就是服务器返回数据对应的字段名称// defaultContent 和 className 可选参数{data:字段名称1,defaultContent: 默认值,className:类名},{data:字段名称n,defaultContent: 默认值,className:类名}],/*创建tr/td时的回调函数可以继续修改、优化tr/td的显示里边有遍历效果会依次扫描生成的每个trrow:创建好的tr的dom对象data:数据源代表服务器端返回的每条记录的实体信息dataIndex:数据源的索引号码*/createdRow:function(row,data,dataIndex){}} );2、服务端
/*
draw: 客户端调用服务器端次数标识
recordsTotal: 获取数据记录总条数
recordsFiltered: 数据过滤后的总数量
data: 获得的具体数据
注意recordsTotal和recordsFiltered都设置为记录的总条数
*/
$result [draw $request-get(draw),recordsTotal $count,recordsFiltered $count,data $data
];
return json_encode($result);3、搜索 datatable对象.api().ajax.reload() 重新加载数据 var table $(#example).DataTable( {ajax: data.json
} );$(#search).on(click,function(){table.api().ajax.reload();
});
