jQuery的表格插件datatables学习总结
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
@import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";
</style>
<script type="text/javascript" language="javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
引入js和css文件。可以在demo里复制。注意路径地址。
第二步
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "/SSS/dataTables/de_DE.txt"
},
"bStateSave": true,
//"bJQueryUI": true,?? //使用jqueryui 。我用的时候显示的不是很好
"sPaginationType": "full_numbers"//分页
} );
} );
</script>
</head>
<body id="dt_example">//此处为body的id
<div id="container" align="center">//*div 里是 table ，table包括thead等，最好按此格式写*
<h1>物品种类管理</h1>
<div id="demo">
<table cellpadding="5" cellspacing="0" border="1" id="example" align="center">//id 别忘了
<thead>
<tr>
<th>物品编号</th>
<th>物品名称</th>
<th>物品单位</th>
<th>编辑状态</th>
<th>随便</th>
</tr>
</thead>
<tr ]]//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
??? //} );
//} );
//$(document).ready(function() {
??? //$('#example').dataTable( {
??? ??? //"aoColumns": [
??? ??? //??? /* Engine */?? null,? //默认
??? ??? //??? /* Browser */? null,
??? ??? //??? /* Platform */ { "bSearchable": false, //不可参与搜索
??? ??? //??? ???????????????? "bVisible":??? false },//不可见
??? ??? //??? /* Version */? { "bVisible":??? false },//不可见
??? ??? //??? /* Grade */??? 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":???? " 最后一页 "
}
}
这些是datatables的基础部分。应该够用了吧。试试吧