DataTables整理

最近后台网上找了个现成的用bootstrap 和DataTables一起搭的后台,好看的一个没有汉化,进行了一下整理和样式的微调。相关的配置我进行了一下整理:
首先,我先改了……table.js里的关于datatable的配置,使页面的显示为中文

$('.data-table').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": "<'col-md-3 col-sm-3'lf>t<i><p>",
        "bPaginate": true,//显示(使用)分页器
        "bSort": false, //是否支持排序功能
        "aaSorting": [[3,"desc"],[4, "desc"],[5, "desc"]],//指定按多列数据排序的依据
        "oLanguage": {//语言设置
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "没有检索到数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            //"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
            "sInfo": "共 _TOTAL_ 条记录",
            "sInfoEmtpy": "没有数据",
            "sProcessing": '<i class="fa fa-coffee"></i> 正在加载数据...',
            "sSearch": "搜索",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
            }
        }
    });

上面的sDom是影响布局的重点(自定义布局)

//自定义布局

*  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>

//语法结构
<> 表示一个闭合DIV
例:<> =

<"类名称"> 表示一个带类名称的闭合DIV
例:<"top"> = <div class="top"></div>

l - 每行显示的记录数
f - 搜索框
t - 表格
i - 表格信息
p - 分页条
r - 加载时的进度条

然后找到本页的CSS样式进行微调,就能得到想要的TABLE啦~

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值