zoukankan      html  css  js  c++  java
  • datatable的dom配置

    • l - Length changing 改变每页显示多少条数据的控件
    • f - Filtering input 即时搜索框控件
    • t - The Table 表格本身
    • i - Information 表格相关信息控件
    • p - Pagination 分页控件
    • r - pRocessing 加载等待显示信息
    • < > - div elements 代表一个div元素 <div><div>
    • <"#id" > - div with an id 指定了id的div元素 <div id='id'><div>
    • <"class" > - div with a class 指定了样式名的div元素 <div class='class'><div>
    • <"#id.class" > - div with an id and class 指定了id和样式的div元素 <div id='id' class='class'><div>

    这些字母你可以理解为一个标签,dt会自动把这些字母替换成相应的控件,就想模板一样。上面的这些元素 l、f、t、i、p、r除了t只能指定一次,其他的均可多次指定。

    例子:

    "dom":

      "<'downloadExcel'B>" + "<'row'<'col-xs-3 font1'l><'#mytool.col-xs-4'>r>" + "t" +
      "<'row'<'col-xs-6'i><'col-xs-6'p>>",

    1、此处B为button标签,举例如下:

    此功能是点击按钮导出为当前分页的Excel
    若是前台分页可以导出全部,若是后台分页则有两个选择:1、通过前提ajax调用查询后台所有数据,在后台封装转为Excel;2、datatable中通过对

    "lengthChange": true,"lengthMenu": [ [5, 10, 15, 20, 25, 50, 100, 5000], [5, 10, 15, 20, 25, 50, 100, "所有"] ]的配置,然后导出Excel。

    PS:5000可以改成任意大,因为我的后台是WHERE ROWNUM <= ? 

     1 "buttons": [
     2             {
     3                 "extend": "excelHtml5",
     4                 "text": "导出",
     5                 "className": "btn btn-primary btn-sm local",
     6                 "customize": function(xlsx) {
     7                     var sheet = xlsx.xl.worksheets['sheet1.xml'];
     8                     $('row c[r^="C"]',sheet).attr('s','2');
     9                 }
    10             }
    11         ],

    2、小写的L:代表 改变每页显示多少条数据的控件

      r:代表 加载等待显示信息

      t:代表 Table 表格本身

      i:代表 表格相关信息控件

      p:代表 Pagination 分页控件

      <>:代表一个div

      downloadExcel,row,col-xs-3...为class,可以在style中写

     

    不足之处,请指点,不胜感激。

  • 相关阅读:
    nginx配置文件中的location中文详解
    binlog、redo log、undo log区别
    OLTP和OLAP的区别
    MPP、SMP、NUMA概念介绍
    NUMA体系结构介绍
    在Linux下判断系统当前是否开启了超线程
    NUMA的取舍与优化设置
    LRU缓存算法
    optimize table
    使用innodb_force_recovery解决MySQL崩溃无法重启问题
  • 原文地址:https://www.cnblogs.com/dream-by-dream/p/11804149.html
Copyright © 2011-2022 走看看