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>

 

posted @ 2021-05-12 15:38  不知起什么名字  阅读(2020)  评论(0编辑  收藏  举报