zoukankan      html  css  js  c++  java
  • DataTable插件指定某列不可排序

    datatable是一个jQuery扩展的表格插件。其提供了强大的表格功能。

    官方地址:http://www.datatables.NET/

    DataTable提供的表格样式里面,第一行都是会有排序功能的,但是如果遇到我们想将第一列设置为chexkbox,那也就是说这一列我们不需要排序,如下图:

    在官方示例中,对于表格的是否可排序是在初始化中设置的一个值来决定的

    1 $(".datatable-simplified").dataTable( {  
    2         "bSort": false  
    3 });  

    如果要在初始化时就指定默认以哪一列来排序则

    1 $(document).ready(function() {  
    2     $('#example').dataTable( {  
    3         "aaSorting": [[ 4, "desc" ]]  
    4     } );  
    5 } );  

    这会在页面加载时初始化表格,并以序号为4也就是第5列进行降序排列

    不过,这种设置只能是对表头的所有列一起进行设置。要么全都可排序,要么全都不可排序。

    现有一需求,第一列为checkbox,要其不可排序,其余列均可排序

    经过研究后,发现有一配置可解决该问题。在初始化时设置以下值

    1 $(".datatable").dataTable( {  
    2         "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }]  
    3     });  

    该值的含义为。初始化datatable,但对序号为0列的列不进行排序,别的列均可进行排序

    但是,改完之后会发现,页面一加载之后,第一列总是会有排序的箭头,如图:

    是因为插件本身设定在页面加载进去之后以第一列为开始做排序,也就是第0列

    所以我们还需要再加段代码:

     1 $('#DataTable').DataTable({
     2   paging: true,   //表格分页,默认是true
     3    "language": {
     4      "lengthMenu": "每页 _MENU_ 条记录",
     5        "zeroRecords": "没有找到记录",
     6        "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
     7        "infoEmpty": "无记录",
     8        "infoFiltered": "(从 _MAX_ 条记录过滤)",9    },
    10    "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] }],
    11    "aaSorting": [[1, "asc"]]
    12 
    13});

    这样就可以解决问题,使程序本身从第一列开始排序。

  • 相关阅读:
    mongodb性能测试:long时间戳与string格式时间
    .netcore mongodb 分页+模糊查询+多条件查询
    .netcore 图片处理
    ELEMENT-UI 封装el-table 局部刷新row
    vue-upload 封装组件-上传组件
    vue实现v-model父子组件间的双向通信
    cc.AudioSource
    Chrome插件:本地程序实现验证码破解(浏览器与本地进程通信)
    Chrome插件:微信公众号自动登录(chrome.extension)
    Chrome插件:浏览器后台与页面间通信
  • 原文地址:https://www.cnblogs.com/c-961900940/p/6186764.html
Copyright © 2011-2022 走看看