zoukankan      html  css  js  c++  java
  • datatable 自定义排序 及 多列排序

    1.自定义排序(根据字段中的某些内容排序)

    //js
    <script type="text/javascript" src="jquery.dataTables.js"></script>
    <script type="text/javascript" src="dataTables.numericComma.js"></script> 
           jQuery.extend(jQuery.fn.dataTableExt.oSort, {
              "html-percent-pre": function (a) {
                 var x = String(a).replace(/<[sS]*?>/g, "");    
                 x = x.replace(/&amp;nbsp;/ig, "");                   //去除空格
                 x = x.replace(/%/, "");                          //去除百分号
                 return parseFloat(x);
              },
             "html-percent-asc": function (a, b) {                //正序排序引用方法
              return ((a < b) ? -1 : ((a > b) ? 1 : 0));
           },
           "html-percent-desc": function (a, b) {                //倒序排序引用方法
              return ((a < b) ? 1 : ((a > b) ? -1 : 0));
           }
        });      
           var oTable1 = $('#table_report').dataTable({
                    "aoColumnDefs": [
                        { "sType": "html-percent", "aTargets": [8] },    //指定列号使用自定义排序
                    ],
                    "bLengthChange": true, //开关,是否显示每页大小的下拉框
                    "aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "所有"]],
                    'iDisplayLength': 25, //每页显示10条记录
                    'bFilter': true,  //是否使用内置的过滤功能
                    "bInfo": true, //开关,是否显示表格的一些信息
                    "bPaginate": true //开关,是否显示分页器
                });
            });
    </script>

     上述内容来自 https://www.dazhuanlan.com/2020/03/07/5e63196a793a1/

    2.多列排序

    /* datatables允许同时指定多个列排序,有很多不同的方法来实现
    用户按住shirft,鼠标分别点击第一列,第二列等等,可以实现多列同时排序
    给每列加上columns.orderData选项,即如果指定列排序时,第一列有相同数据,则按照第二列排序
    使用columns.orderData选项给多列排序,比如[ [0,'asc'], [1,'asc'] ]
    使用order()方法实现多列排序,详细参见api
    注意,可以使用orderMulti 选项来禁用用户按住shift点击多列排序
    */
    <script>
        $(document).ready(function () {
            $('#example').DataTable({
                //ajax: "../data/arrays.txt",
    
                columnDefs: [
                    {
                        targets: [0],
                        orderData: [0,1]
                    },
                    {
                        targets: [1],
                        orderData: [1,0]
                    }
                ]
            });
        });
    </script>
  • 相关阅读:
    spring-boot-mybatis-plus-layui 自定义代码生成完整多对一
    spring-boot-jap-layui-mysql 完整的jpa多对一
    IDEA 2020.1 热部署(JRebel)
    IDEA 2020.1 隐藏文件和文件夹
    IDEA 2020.1 修改代码字体和界面字体
    IDEA 2020.1 创建springboot项目(国内脚手架)安装lombok
    tensorflow2.0
    cuda资料收集
    视觉学习资料整理
    std::move and std::forward
  • 原文地址:https://www.cnblogs.com/indifferent/p/14760078.html
Copyright © 2011-2022 走看看