数据表排序不起作用

【问题标题】：Datatable sorting is not working数据表排序不起作用
【发布时间】：2016-08-22 17:54:33
【问题描述】：

我正在尝试对数据表中的 asc、desc 进行排序。但我不知道我哪里出错了？有人可以建议我下面代码中的问题在哪里吗？

Js Bin

Javascript

$(document).ready( function () {

    var table = $('#example').DataTable({
       'aoColumnDefs': [{
           'bSortable': false,
           'aTargets': -1
        }]
    });

});

【问题讨论】：

  • 您使用的是客户端还是服务器端数据表？
  • 客户端数据表@MayankPandey
  • 它完全按照您的要求执行：'bSortable': false 在所有 targets === 所有列 === 排序在任何地方都完全被禁用。

标签： javascript jquery datatable


【解决方案1】：

这是一个完整的 html 文档

<!DOCTYPE html>
<html>
   <head>
      <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
      <meta charset=utf-8 />
      <title>DataTables - JS Bin</title>
      <script>
      $(document).ready( function () {

    /**/

    // By index
    $('#example').DataTable();  


});
      </script>
   </head>
   <body>
      <div class="container">
         <table id="example" class="display" width="100%">
            <thead>
               <tr>
                  <td>Name</td>
                  <td>Position</td>
                  <td>Office</td>
                  <td>Age</td>
                  <td>Start date</td>
                  <td class="nosort">Salary</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
            </thead>
            <tbody>
               <tr role="row" class="odd">
                  <td>Ad</td>
                  <td>Administrator</td>
                  <td>07/06/2016 11:41:49</td>
                  <td class="sorting_1">0</td>
                  <td>28605</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28605" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28605" target="_blank">Edit</a> | <a onclick="deletequeue('Ad','queue_dashboard_ajx.php?action=delete&amp;bucket=28605')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="even">
                  <td>wkfs</td>
                  <td>karthik</td>
                  <td>02/11/2016 06:39:39</td>
                  <td class="sorting_1">0</td>
                  <td>28402</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28402" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28402" target="_blank">Edit</a> | <a onclick="deletequeue('wkfs','queue_dashboard_ajx.php?action=delete&amp;bucket=28402')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="odd">
                  <td>viswas test bucket</td>
                  <td>Administrator</td>
                  <td>07/01/2016 12:34:41</td>
                  <td class="sorting_1">0</td>
                  <td>28576</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28576" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28576" target="_blank">Edit</a> | <a onclick="deletequeue('viswas test bucket','queue_dashboard_ajx.php?action=delete&amp;bucket=28576')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="even">
                  <td>testallticket</td>
                  <td>Administrator</td>
                  <td>07/15/2016 08:04:32</td>
                  <td class="sorting_1">0</td>
                  <td>28661</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28661" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28661" target="_blank">Edit</a> | <a onclick="deletequeue('testallticket','queue_dashboard_ajx.php?action=delete&amp;bucket=28661')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="odd">
                  <td>test_search</td>
                  <td>Administrator</td>
                  <td>07/29/2016 06:48:42</td>
                  <td class="sorting_1">0</td>
                  <td>28682</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28682" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28682" target="_blank">Edit</a> | <a onclick="deletequeue('test_search','queue_dashboard_ajx.php?action=delete&amp;bucket=28682')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="even">
                  <td>test_armed_IR_update</td>
                  <td>Administrator</td>
                  <td>08/17/2016 06:44:39</td>
                  <td class="sorting_1">0</td>
                  <td>28721</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28721" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28721" target="_blank">Edit</a> | <a onclick="deletequeue('test_armed_IR_update','queue_dashboard_ajx.php?action=delete&amp;bucket=28721')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="odd">
                  <td>test_anand_sr_and_cr</td>
                  <td>Administrator</td>
                  <td>07/29/2016 06:29:13</td>
                  <td class="sorting_1">0</td>
                  <td>28680</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28680" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28680" target="_blank">Edit</a> | <a onclick="deletequeue('test_anand_sr_and_cr','queue_dashboard_ajx.php?action=delete&amp;bucket=28680')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="even">
                  <td>test_anand</td>
                  <td>Administrator</td>
                  <td>07/14/2016 07:32:24</td>
                  <td class="sorting_1">0</td>
                  <td>28660</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28660" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28660" target="_blank">Edit</a> | <a onclick="deletequeue('test_anand','queue_dashboard_ajx.php?action=delete&amp;bucket=28660')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="odd">
                  <td>test date filter</td>
                  <td>Administrator</td>
                  <td>07/06/2016 11:34:24</td>
                  <td class="sorting_1">0</td>
                  <td>28604</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28604" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28604" target="_blank">Edit</a> | <a onclick="deletequeue('test date filter','queue_dashboard_ajx.php?action=delete&amp;bucket=28604')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="even">
                  <td>test 1550</td>
                  <td>Administrator</td>
                  <td>08/17/2016 08:56:26</td>
                  <td class="sorting_1">0</td>
                  <td>28722</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28722" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28722" target="_blank">Edit</a> | <a onclick="deletequeue('test 1550','queue_dashboard_ajx.php?action=delete&amp;bucket=28722')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="odd">
                  <td>test 1</td>
                  <td>Administrator</td>
                  <td>06/17/2016 03:35:05</td>
                  <td class="sorting_1">0</td>
                  <td>28541</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28541" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28541" target="_blank">Edit</a> | <a onclick="deletequeue('test 1','queue_dashboard_ajx.php?action=delete&amp;bucket=28541')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
               <tr role="row" class="even">
                  <td>test</td>
                  <td>Administrator</td>
                  <td>06/13/2016 11:30:45</td>
                  <td class="sorting_1">0</td>
                  <td>28521</td>
                  <td><a href="queue_dashboard_bucket_view.php?bucketid=28521" target="_blank">View</a>&nbsp; | <a href="globalsearch.php?queue=28521" target="_blank">Edit</a> | <a onclick="deletequeue('test','queue_dashboard_ajx.php?action=delete&amp;bucket=28521')" href="javascript:void(0);">Delete</a>&nbsp;</td>
                  <td></td>
                  <td></td>
                  <td></td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

【讨论】：

  • @QuestionUser 数据表功能不起作用...您确定这些链接有效吗？ 尝试改用这个 //cdn.datatables.net/1.10.12/js/jquery.dataTables .min.js
  • @QuestionUser 更新了我的答案：还要确保头部 TD 计数与身体 TD 计数相同......并且您的 jquery.datatable.js 链接不起作用......
【解决方案2】：

您需要提供要在其上添加排序的列的索引，以像这样的数据表的顺序选项

$('#example').DataTable( {
    "order": [[ 0, "asc" ]]
} );

这里是工作 js bin。

http://live.datatables.net/aqoxob/371/

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2019-04-29
    • 1970-01-01
    • 2023-04-08
    • 2017-07-25
    • 2012-12-18
    • 2017-02-22
    • 2016-12-04
    • 2017-06-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode