jQuery的表格插件datatables

2023-04-19 19:34:57

轉自： http://www.cnblogs.com/luluping/archive/2010/12/01/1893423.html

//使用jqueryui 。我用的時候顯示的不是很好

"sPaginationType": "full_numbers"//分頁

} );

} );

</script>

</head>

<body id="dt_example">//此處為body的id

<div id="container" align="center">/ null, //預設

// null,

// { "bSearchable": false, //不可參與搜尋

// "bVisible": false },//不可見

// { "bVisible": false },//不可見

// null

//] } );

//} );

//$(document).ready(function() {

//$('#example').dataTable({

//});

//} );

//$(document).ready(function() {

//$('#example').dataTable( {

//"sDom": '<"top"i>rt<"bottom"flp<"clear">'//這段是自定義布局沒搞明白挺複雜的。 * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class * Examples: <"wrapper"flipt>, <lf<t>ip>

//} );

//} );

//$(document).ready(function() {

// $('#example').dataTable( {

// "bStateSave": true //儲存狀态到cookie *************** 很重要，當搜尋的時候頁面一重新整理會導緻搜尋的消失。使用這個屬性就可避免了

//} );

//} );

//$(document).ready(function() {

//$('#example').dataTable( {

//"sPaginationType": "full_numbers" //分頁，一共兩種樣式另一種為two_button 是datatables預設

//} );

//} );

//$(document).ready(function() {

//$('#example').dataTable( { //分頁資訊不是很難了解。

//"oLanguage": {

//"sLengthMenu": "Display _MENU_ records per page",

//"sZeroRecords": "Nothing found - sorry",

//"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",

//"sInfoEmtpy": "Showing 0 to 0 of 0 records",

//"sInfoFiltered": "(filtered from _MAX_ total records)"

//}

//} );

//} )

$(document).ready(function() {

oTable = $('#example').dataTable({

"bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css

"sPaginationType": "full_numbers"

});

} );

預設的語言是英文的當然可以國際化：

"sUrl": "/SSS/dataTables/de_DE.txt" 添加個國際化的檔案就可以。名字随便路徑對了就可以。我寫的國際化檔案内容如下，可以直接複制到txt中使用.

{

"sProcessing": "Bitte warten...",

"sLengthMenu": "顯示_MENU_條 ",

"sZeroRecords": "沒有您要搜尋的内容",

"sInfo": "從_START_ 到 _END_ 條記錄——總記錄數為 _TOTAL_ 條",

"sInfoEmpty": "記錄數為0",

"sInfoFiltered": "(全部記錄數 _MAX_ 條)",

"sInfoPostFix": "",

"sSearch": "搜尋",

"sUrl": "",

"oPaginate": {

"sFirst": "第一頁",

"sPrevious": " 上一頁 ",

"sNext": " 下一頁 ",

"sLast": " 最後一頁 "

}

}

js/jquery jquery datatables

上一篇: Spring Boot API 的 x-www-form-urlencoded 送出

下一篇: Ruby元程式設計(讀書筆記)-第1章

繼續閱讀