要仅保留所有表列上的排序，同时在Jquery Bootstrap4 Datatable中保持搜索框不变

分类：编程问答

如何解决要仅保留所有表列上的排序，同时在Jquery Bootstrap4 Datatable中保持搜索框不变

我试图仅删除所有表列上的排序。

我将以下链接放置在我的应用程序文件中。

<!DOCTYPE html>
<html>
  <head>
    <title>GLOBAL FEET</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= favicon_link_tag asset_path('/sb-admin/dist/assets/img/globe.jpg') %>
    
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
    
    <%= stylesheet_link_tag 'application',media: 'all','data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application','data-turbolinks-track': 'reload' %>
    <link href="/sb-admin/dist/css/styles.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js" crossorigin="anonymous"></script>
  </head>

  <body class="sb-nav-fixed">
      
      <%= render 'layouts/messages' %>

    <%= render 'layouts/topnavbar' %>
    
    <%= render 'layouts/sidenavbar' %>

    <%= yield %>
    
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script src="/sb-admin/dist/js/scripts.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js" crossorigin="anonymous"></script>
        <script src="/sb-admin/dist/assets/demo/chart-area-demo.js"></script>
        <script src="/sb-admin/dist/assets/demo/chart-bar-demo.js"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" crossorigin="anonymous"></script>
        <script src="/sb-admin/dist/assets/demo/datatables-demo.js"></script>
  </body>
</html>

我的桌子如下； 

<div class="table-responsive">
                                <% @balance = 0 %>
                                <table class="table table-bordered" id="dataTable example" width="100%" cellspacing="0">
                                    <thead>
                                        <tr>
                                            <th>Date</th>
                                            <th>Description</th>
                                            <th>Amount</th>
                                            <th>Discount</th>
                                            <th>Paid</th>
                                            <th>Balance</th>
                                            <th>Status</th>
                                            <th>Remark</th>
                                        </tr>
                                    </thead>
                                    <tfoot>
                                        <tr>
                                           <th>Date</th>
                                            <th>Description</th>
                                            <th>Amount</th>
                                            <th>Discount</th>
                                            <th>Paid</th>
                                            <th>Balance</th>
                                            <th>Status</th>
                                            <th>Remark</th>
                                        </tr>
                                    </tfoot>
                                    <tbody>
                                        <% @farhangs.each do |farhang| %>
                                        <tr>
                                          <td><%= link_to farhang.date.strftime('%d/%m/%Y'),edit_farhang_path(farhang) %></td>
                                          <td><%= span_with_possibly_red_color farhang.description %></td>
                                          <td><%= number_with_precision(farhang.amount,:delimiter => ",",:precision => 2) %></td>
                                          <td><%= number_with_precision(farhang.discount,:precision => 2) %></td>
                                          <td><%= number_with_precision(farhang.paid,:precision => 2) %></td>
                                          
                                           <% @balance += farhang.amount.to_f - farhang.discount.to_f - farhang.paid.to_f %>

                                             <% color = @balance >= 0 ? "pos" : "neg" %>
                                             
                                          <td class="<%= color %>"><%= number_with_precision(@balance.abs,:precision => 0) %></td>
                                          <td><%= farhang.status %></td>
                                          <td><%= farhang.remark %></td>
                                        </tr>
                                        <% end %>
                                    </tbody>
                                </table>
                            </div>

我的jquery代码如下； 

 $('#example').dataTable( {
    "ordering": false
} );

不幸的是，随着排序，搜索框也消失了，我需要完整保留搜索栏。

我尝试了数小时和数天的所有可能信息，但没有得到理想的结果。

任何建议都是最欢迎的。

谢谢。

解决方法

这很奇怪！我无法复制您的问题。但是，您是否尝试过将 "order": []替换为ordering: false？

这是一个例子：

var jsonData = [{ "firstName": "Airi","lastName": "Satou","position": "Accountant","office": "Tokyo","age": 33,"startDate": "2008/11/28","salary": "$162,700.00","extn": "5407","email": "a.satou@datatables.net" },{ "firstName": "Angelica","lastName": "Ramos","position": "Chief Executive Officer (CEO)","office": "London","age": 47,"startDate": "2009/10/09","salary": "$1,200,000.00","email": "a.ramos@datatables.net" },{ "firstName": "Ashton","lastName": "Cox","position": "Junior Technical Author","office": "San Francisco","age": 66,"startDate": "2009/01/12","salary": "$86,"email": "a.cox@datatables.net" },{ "firstName": "Bradley","lastName": "Greer","position": "Software Engineer","age": 41,"startDate": "2012/10/13","salary": "$132,"email": "b.greer@datatables.net" },{ "firstName": "Brenden","lastName": "Wagner","age": 28,"startDate": "2011/06/07","salary": "$206,850.00","email": "b.wagner@datatables.net" },{ "firstName": "Brielle","lastName": "Williamson","position": "Integration Specialist","office": "New York","age": 61,"startDate": "2012/12/02","salary": "$372,"email": "b.williamson@datatables.net" },{ "firstName": "Bruno","lastName": "Nash","age": 38,"startDate": "2011/05/03","salary": "$163,500.00","email": "b.nash@datatables.net" },{ "firstName": "Caesar","lastName": "Vance","position": "Pre-Sales Support","age": 21,"startDate": "2011/12/12","salary": "$106,450.00","email": "c.vance@datatables.net" },{ "firstName": "Cara","lastName": "Stevens","position": "Sales Assistant","age": 46,"startDate": "2011/12/06","salary": "$145,600.00","email": "c.stevens@datatables.net" },{ "firstName": "Cedric","lastName": "Kelly","position": "Senior Javascript Developer","office": "Edinburgh","age": 22,"startDate": "2012/03/29","salary": "$433,060.00","email": "c.kelly@datatables.net" },{ "firstName": "Charde","lastName": "Marshall","position": "Regional Director","age": 36,"startDate": "2008/10/16","salary": "$470,"email": "c.marshall@datatables.net" },{ "firstName": "Colleen","lastName": "Hurst","position": "Javascript Developer","age": 39,"startDate": "2009/09/15","salary": "$205,"email": "c.hurst@datatables.net" },{ "firstName": "Dai","lastName": "Rios","position": "Personnel Lead","age": 35,"startDate": "2012/09/26","salary": "$217,"email": "d.rios@datatables.net" },{ "firstName": "Donna","lastName": "Snider","position": "Customer Support","age": 27,"startDate": "2011/01/25","salary": "$112,"email": "d.snider@datatables.net" },{ "firstName": "Doris","lastName": "Wilder","office": "Sydney","age": 23,"startDate": "2010/09/20","salary": "$85,"email": "d.wilder@datatables.net" },{ "firstName": "Finn","lastName": "Camacho","position": "Support Engineer","startDate": "2009/07/07","salary": "$87,"email": "f.camacho@datatables.net" },{ "firstName": "Fiona","lastName": "Green","position": "Chief Operating Officer (COO)","age": 48,"startDate": "2010/03/11","salary": "$850,"email": "f.green@datatables.net" },{ "firstName": "Garrett","lastName": "Winters","age": 63,"startDate": "2011/07/25","salary": "$170,750.00","email": "g.winters@datatables.net" },{ "firstName": "Gavin","lastName": "Joyce","position": "Developer","age": 42,"startDate": "2010/12/22","salary": "$92,575.00","email": "g.joyce@datatables.net" },"lastName": "Cortez","position": "Team Leader","startDate": "2008/10/26","salary": "$235,"email": "g.cortez@datatables.net" },{ "firstName": "Gloria","lastName": "Little","position": "Systems Administrator","age": 59,"startDate": "2009/04/10","salary": "$237,"email": "g.little@datatables.net" },{ "firstName": "Haley","lastName": "Kennedy","position": "Senior Marketing Designer","age": 43,"startDate": "2012/12/18","salary": "$313,"email": "h.kennedy@datatables.net" },{ "firstName": "Hermione","lastName": "Butler","startDate": "2011/03/21","salary": "$356,250.00","email": "h.butler@datatables.net" },{ "firstName": "Herrod","lastName": "Chandler","startDate": "2012/08/06","salary": "$137,"email": "h.chandler@datatables.net" },{ "firstName": "Hope","lastName": "Fuentes","position": "Secretary","startDate": "2010/02/12","salary": "$109,"email": "h.fuentes@datatables.net" },{ "firstName": "Howard","lastName": "Hatfield","position": "Office Manager","age": 51,"startDate": "2008/12/16","salary": "$164,"email": "h.hatfield@datatables.net" },{ "firstName": "Jackson","lastName": "Bradshaw","position": "Director","age": 65,"startDate": "2008/09/26","salary": "$645,"email": "j.bradshaw@datatables.net" },{ "firstName": "Jena","lastName": "Gaines","age": 30,"startDate": "2008/12/19","salary": "$90,560.00","email": "j.gaines@datatables.net" },{ "firstName": "Jenette","lastName": "Caldwell","position": "Development Lead","startDate": "2011/09/03","salary": "$345,"email": "j.caldwell@datatables.net" },{ "firstName": "Jennifer","lastName": "Chang","office": "Singapore","startDate": "2010/11/14","salary": "$357,650.00","email": "j.chang@datatables.net" },"lastName": "Acosta","position": "Junior Javascript Developer","startDate": "2013/02/01","salary": "$75,"email": "j.acosta@datatables.net" },{ "firstName": "Jonas","lastName": "Alexander","startDate": "2010/07/14","email": "j.alexander@datatables.net" },{ "firstName": "Lael","startDate": "2009/02/27","salary": "$103,"email": "l.greer@datatables.net" },{ "firstName": "Martena","lastName": "Mccray","position": "Post-Sales support","startDate": "2011/03/09","salary": "$324,050.00","email": "m.mccray@datatables.net" },{ "firstName": "Michael","lastName": "Silva","position": "Marketing Designer","startDate": "2012/11/27","salary": "$198,"email": "m.silva@datatables.net" },"lastName": "Bruce","age": 29,"startDate": "2011/06/27","salary": "$183,"email": "m.bruce@datatables.net" },{ "firstName": "Michelle","lastName": "House","age": 37,"startDate": "2011/06/02","salary": "$95,400.00","email": "m.house@datatables.net" },{ "firstName": "Olivia","lastName": "Liang","age": 64,"startDate": "2011/02/03","salary": "$234,"email": "o.liang@datatables.net" },{ "firstName": "Paul","lastName": "Byrd","position": "Chief Financial Officer (CFO)","startDate": "2010/06/09","salary": "$725,"email": "p.byrd@datatables.net" },{ "firstName": "Prescott","lastName": "Bartlett","position": "Technical Author","startDate": "2011/05/07","email": "p.bartlett@datatables.net" },{ "firstName": "Quinn","lastName": "Flynn","position": "Support Lead","startDate": "2013/03/03","salary": "$342,"email": "q.flynn@datatables.net" },{ "firstName": "Rhona","lastName": "Davidson","age": 55,"startDate": "2010/10/14","salary": "$327,900.00","email": "r.davidson@datatables.net" },{ "firstName": "Sakura","lastName": "Yamamoto","startDate": "2009/08/19","salary": "$139,"email": "s.yamamoto@datatables.net" },{ "firstName": "Serge","lastName": "Baldwin","position": "Data Coordinator","startDate": "2012/04/09","salary": "$138,"email": "s.baldwin@datatables.net" },{ "firstName": "Shad","lastName": "Decker","startDate": "2008/11/13","email": "s.decker@datatables.net" },{ "firstName": "Shou","lastName": "Itou","position": "Regional Marketing","age": 20,"startDate": "2011/08/14","email": "s.itou@datatables.net" },{ "firstName": "Sonya","lastName": "Frost","startDate": "2008/12/13","email": "s.frost@datatables.net" },{ "firstName": "Suki","lastName": "Burks","age": 53,"startDate": "2009/10/22","salary": "$114,"email": "s.burks@datatables.net" },{ "firstName": "Tatyana","lastName": "Fitzpatrick","age": 19,"startDate": "2010/03/17","salary": "$385,"email": "t.fitzpatrick@datatables.net" },{ "firstName": "Thor","lastName": "Walton","startDate": "2013/08/11","salary": "$98,540.00","email": "t.walton@datatables.net" },{ "firstName": "Tiger","lastName": "Nixon","position": "System Architect","startDate": "2011/04/25","salary": "$320,800.00","email": "t.nixon@datatables.net" },{ "firstName": "Timothy","lastName": "Mooney","startDate": "2008/12/11","salary": "$136,200.00","email": "t.mooney@datatables.net" },{ "firstName": "Unity","startDate": "2009/12/09",675.00","email": "u.butler@datatables.net" },{ "firstName": "Vivian","lastName": "Harrell","position": "Financial Controller","age": 62,"startDate": "2009/02/14","salary": "$452,"email": "v.harrell@datatables.net" },{ "firstName": "Yuri","lastName": "Berry","position": "Chief Marketing Officer (CMO)","age": 40,"startDate": "2009/06/25","salary": "$675,"email": "y.berry@datatables.net" },{ "firstName": "Zenaida","lastName": "Frank","startDate": "2010/01/04","salary": "$125,"email": "z.frank@datatables.net" },{ "firstName": "Zorita","lastName": "Serrano","age": 56,"startDate": "2012/06/01","salary": "$115,"email": "z.serrano@datatables.net" }];

$(document).ready(function() {
    $('#example').DataTable( {
      //order: [],ordering: false,data: jsonData,columns: [
          { data: 'firstName' },{ data: 'lastName' },{ data: 'position' },{ data: 'office' },{ data: 'age' },{ data: 'startDate' },{ data: 'salary' },{ data: 'extn' },{ data: 'email' }
         ]
    });
} );
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<table id="example" class="table table-bordered table-striped" style="width:100%">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Extn.</th>
      <th>E-mail</th>
    </tr>
  </thead>
</table>
<br><br>

快乐编码！

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot