本站公告: 暂无公告....

Jquery DataTables使用教程(二)

前端开发 兰亭楼 0评论 670浏览

三、代码实例属性说明


/$(document).ready(function() {
//$('#example').dataTable( {//加载
//"bPaginate": true,//分页按钮
//"bLengthChange": true,//每行显示记录数
//"bFilter": true,//搜索栏
//"bSort": true,//排序
//"bInfo": true,//Showing 1 to 10 of 23 entries  总记录数没也显示多少等信息
//"bAutoWidth": true } );
//} );


//$(document).ready(function() {
//$('#example').dataTable( {
//"aaSorting": [[ 4, "desc" ]]//给列表排序 ,第一个参数表示数组 。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": "",    //"sUrl": "dataTables/de_DE.txt" 添加个国际化的文件
"oPaginate": {
"sFirst":    "第一页",
"sPrevious": " 上一页 ",
"sNext":     " 下一页 ",
"sLast":     " 最后一页 "
}
}


de_DE.txt内容如下:


{
"sProcessing":   "处理中...",
"sLengthMenu":   "显示 _MENU_ 项结果",
"sZeroRecords":  "没有匹配结果",
"sInfo":         "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty":    "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix":  "",
"sSearch":       "搜索:",
"sUrl":          "",
"oPaginate": {
"sFirst":    "首页",
"sPrevious": "上页",
"sNext":     "下页",
"sLast":     "末页"
}
}


 





转载请注明: 兰亭楼 » Jquery DataTables使用教程(二)

发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址