jquery datatables
0
[已解决问题]
解决于 2013-10-29 16:54
|
准备工作： 了解DataTables 官方网站：http://www.datatables.net/ 简介：DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。 主要特点：
是否启用自动适应列宽 默认值：True 示例代码： $(document).ready( function () {
$('#example').dataTable( {
"bAutoWidth": false } ); } );
bDeferRender 是否启用延迟加载：当你使用AJAX数据源时，可以提升速度。 默认值：False 示例代码： $(document).ready(function() {
var oTable = $('#example').dataTable( { "sAjaxSource": "sources/arrays.txt", "bDeferRender": true } ); } );
bFilter 是否启用内置搜索功能：可以跨列搜索。 默认值：True 示例代码： $(document).ready( function () {
$('#example').dataTable( { "bFilter": false } ); } );
bInfo 是否显示表格相关信息：例如翻页信息等。 默认值：True 示例代码： $(document).ready( function () {
$('#example').dataTable( { "bInfo": false } ); } );
bJQueryUI 是否启用 jQuery UI 皮肤插件支持 默认值:False 示例代码： $(document).ready( function() {
$('#example').dataTable( { "bJQueryUI": true } ); } );
bLengthChange 是否允许用户，在下拉列表自定义选择分页大小(10, 25, 50 and 100),需要分页支持 默认值：True 示例代码： $(document).ready( function () {
$('#example').dataTable( { "bLengthChange": false } ); } ); bPaginate 是否开启分页 默认值：Ture 示例代码: $(document).ready( function () {
$('#example').dataTable( { "bPaginate": false } ); } ); bProcessing 是否启用进度显示，进度条等等，对处理大量数据很有用处。 默认值：false 示例代码： $(document).ready( function () {
$('#example').dataTable( { "bProcessing": true } ); } );
bScrollInfinite 是否开启内置滚动条，并且显示所有数据 默认值：fasle 示例代码： $(document).ready(function() {
$('#example').dataTable( { "bScrollInfinite": true, "bScrollCollapse": true, "sScrollY": "200px" } ); } );
bServerSide 是否启用服务器处理数据源，必须sAjaxSource指明数据源位置 默认值：False 示例代码： $(document).ready( function () { $('#example').dataTable( { "bServerSide": true, "sAjaxSource": "xhr.php" } ); } );
bSort 是否开启列排序功能，如果想禁用某一列排序，可以在每列设置使用bSortable参数 默认值：True 示例代码： $(document).ready( function () {
$('#example').dataTable( { "bSort": false } ); } );
bSortClasses 不清楚是做什么用的，如果处理大量数据时，必须关闭（有人知道吗？） 默认值：False 示例代码： $(document).ready( function () {
$('#example').dataTable( { "bSortClasses": false } ); } ); bStateSave 是否开启cookies保存当前状态信息 默认值：false 示例代码： $(document).ready( function () {
$('#example').dataTable( { "bStateSave": true } ); } );
sScrollX 是否开启水平滚动条 默认值：空 （字符串类型） 示例代码： $(document).ready(function() {
$('#example').dataTable( { "sScrollX": "100%", "bScrollCollapse": true } ); } );
sScrollY 是否开启垂直滚动条，滚动条大小受限于Datatable的高度大小 默认值：空 （字符串类型） 示例代码： $(document).ready(function() {
$('#example').dataTable( { "sScrollY": "200px", "bPaginate": false } ); } );
|
最佳答案
0
学习
奖励园豆：5
其他回答(2)
0
这个插件功能是很强大
收获园豆：1
0
这个不错 谢谢楼主分享
