在 Jquery Bootstrap4 Datatable 中仅删除对所有 table 列的排序，同时保持搜索框完好无损
To remove only sorting on all the table columns while keeping search box intact in Jquery Bootstrap4 Datatable
我正在尝试仅删除对所有 table 列的排序。
我将以下链接放在我的申请文件中。
<!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>
我的 table 如下；
<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, :delimiter => ",", :precision => 2) %></td>
<td><%= number_with_precision(farhang.paid, :delimiter => ",", :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, :delimiter => ",", :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": "2,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": ",200,000.00", "extn": "5407", "email": "a.ramos@datatables.net" },
{ "firstName": "Ashton", "lastName": "Cox", "position": "Junior Technical Author", "office": "San Francisco", "age": 66, "startDate": "2009/01/12", "salary": ",000.00", "extn": "5407", "email": "a.cox@datatables.net" },
{ "firstName": "Bradley", "lastName": "Greer", "position": "Software Engineer", "office": "London", "age": 41, "startDate": "2012/10/13", "salary": "2,000.00", "extn": "5407", "email": "b.greer@datatables.net" },
{ "firstName": "Brenden", "lastName": "Wagner", "position": "Software Engineer", "office": "San Francisco", "age": 28, "startDate": "2011/06/07", "salary": "6,850.00", "extn": "5407", "email": "b.wagner@datatables.net" },
{ "firstName": "Brielle", "lastName": "Williamson", "position": "Integration Specialist", "office": "New York", "age": 61, "startDate": "2012/12/02", "salary": "2,000.00", "extn": "5407", "email": "b.williamson@datatables.net" },
{ "firstName": "Bruno", "lastName": "Nash", "position": "Software Engineer", "office": "London", "age": 38, "startDate": "2011/05/03", "salary": "3,500.00", "extn": "5407", "email": "b.nash@datatables.net" },
{ "firstName": "Caesar", "lastName": "Vance", "position": "Pre-Sales Support", "office": "New York", "age": 21, "startDate": "2011/12/12", "salary": "6,450.00", "extn": "5407", "email": "c.vance@datatables.net" },
{ "firstName": "Cara", "lastName": "Stevens", "position": "Sales Assistant", "office": "New York", "age": 46, "startDate": "2011/12/06", "salary": "5,600.00", "extn": "5407", "email": "c.stevens@datatables.net" },
{ "firstName": "Cedric", "lastName": "Kelly", "position": "Senior Javascript Developer", "office": "Edinburgh", "age": 22, "startDate": "2012/03/29", "salary": "3,060.00", "extn": "5407", "email": "c.kelly@datatables.net" },
{ "firstName": "Charde", "lastName": "Marshall", "position": "Regional Director", "office": "San Francisco", "age": 36, "startDate": "2008/10/16", "salary": "0,600.00", "extn": "5407", "email": "c.marshall@datatables.net" },
{ "firstName": "Colleen", "lastName": "Hurst", "position": "Javascript Developer", "office": "San Francisco", "age": 39, "startDate": "2009/09/15", "salary": "5,500.00", "extn": "5407", "email": "c.hurst@datatables.net" },
{ "firstName": "Dai", "lastName": "Rios", "position": "Personnel Lead", "office": "Edinburgh", "age": 35, "startDate": "2012/09/26", "salary": "7,500.00", "extn": "5407", "email": "d.rios@datatables.net" },
{ "firstName": "Donna", "lastName": "Snider", "position": "Customer Support", "office": "New York", "age": 27, "startDate": "2011/01/25", "salary": "2,000.00", "extn": "5407", "email": "d.snider@datatables.net" },
{ "firstName": "Doris", "lastName": "Wilder", "position": "Sales Assistant", "office": "Sydney", "age": 23, "startDate": "2010/09/20", "salary": ",600.00", "extn": "5407", "email": "d.wilder@datatables.net" },
{ "firstName": "Finn", "lastName": "Camacho", "position": "Support Engineer", "office": "San Francisco", "age": 47, "startDate": "2009/07/07", "salary": ",500.00", "extn": "5407", "email": "f.camacho@datatables.net" },
{ "firstName": "Fiona", "lastName": "Green", "position": "Chief Operating Officer (COO)", "office": "San Francisco", "age": 48, "startDate": "2010/03/11", "salary": "0,000.00", "extn": "5407", "email": "f.green@datatables.net" },
{ "firstName": "Garrett", "lastName": "Winters", "position": "Accountant", "office": "Tokyo", "age": 63, "startDate": "2011/07/25", "salary": "0,750.00", "extn": "5407", "email": "g.winters@datatables.net" },
{ "firstName": "Gavin", "lastName": "Joyce", "position": "Developer", "office": "Edinburgh", "age": 42, "startDate": "2010/12/22", "salary": ",575.00", "extn": "5407", "email": "g.joyce@datatables.net" },
{ "firstName": "Gavin", "lastName": "Cortez", "position": "Team Leader", "office": "San Francisco", "age": 22, "startDate": "2008/10/26", "salary": "5,500.00", "extn": "5407", "email": "g.cortez@datatables.net" },
{ "firstName": "Gloria", "lastName": "Little", "position": "Systems Administrator", "office": "New York", "age": 59, "startDate": "2009/04/10", "salary": "7,500.00", "extn": "5407", "email": "g.little@datatables.net" },
{ "firstName": "Haley", "lastName": "Kennedy", "position": "Senior Marketing Designer", "office": "London", "age": 43, "startDate": "2012/12/18", "salary": "3,500.00", "extn": "5407", "email": "h.kennedy@datatables.net" },
{ "firstName": "Hermione", "lastName": "Butler", "position": "Regional Director", "office": "London", "age": 47, "startDate": "2011/03/21", "salary": "6,250.00", "extn": "5407", "email": "h.butler@datatables.net" },
{ "firstName": "Herrod", "lastName": "Chandler", "position": "Sales Assistant", "office": "San Francisco", "age": 59, "startDate": "2012/08/06", "salary": "7,500.00", "extn": "5407", "email": "h.chandler@datatables.net" },
{ "firstName": "Hope", "lastName": "Fuentes", "position": "Secretary", "office": "San Francisco", "age": 41, "startDate": "2010/02/12", "salary": "9,850.00", "extn": "5407", "email": "h.fuentes@datatables.net" },
{ "firstName": "Howard", "lastName": "Hatfield", "position": "Office Manager", "office": "San Francisco", "age": 51, "startDate": "2008/12/16", "salary": "4,500.00", "extn": "5407", "email": "h.hatfield@datatables.net" },
{ "firstName": "Jackson", "lastName": "Bradshaw", "position": "Director", "office": "New York", "age": 65, "startDate": "2008/09/26", "salary": "5,750.00", "extn": "5407", "email": "j.bradshaw@datatables.net" },
{ "firstName": "Jena", "lastName": "Gaines", "position": "Office Manager", "office": "London", "age": 30, "startDate": "2008/12/19", "salary": ",560.00", "extn": "5407", "email": "j.gaines@datatables.net" },
{ "firstName": "Jenette", "lastName": "Caldwell", "position": "Development Lead", "office": "New York", "age": 30, "startDate": "2011/09/03", "salary": "5,000.00", "extn": "5407", "email": "j.caldwell@datatables.net" },
{ "firstName": "Jennifer", "lastName": "Chang", "position": "Regional Director", "office": "Singapore", "age": 28, "startDate": "2010/11/14", "salary": "7,650.00", "extn": "5407", "email": "j.chang@datatables.net" },
{ "firstName": "Jennifer", "lastName": "Acosta", "position": "Junior Javascript Developer", "office": "Edinburgh", "age": 43, "startDate": "2013/02/01", "salary": ",650.00", "extn": "5407", "email": "j.acosta@datatables.net" },
{ "firstName": "Jonas", "lastName": "Alexander", "position": "Developer", "office": "San Francisco", "age": 30, "startDate": "2010/07/14", "salary": ",500.00", "extn": "5407", "email": "j.alexander@datatables.net" },
{ "firstName": "Lael", "lastName": "Greer", "position": "Systems Administrator", "office": "London", "age": 21, "startDate": "2009/02/27", "salary": "3,500.00", "extn": "5407", "email": "l.greer@datatables.net" },
{ "firstName": "Martena", "lastName": "Mccray", "position": "Post-Sales support", "office": "Edinburgh", "age": 46, "startDate": "2011/03/09", "salary": "4,050.00", "extn": "5407", "email": "m.mccray@datatables.net" },
{ "firstName": "Michael", "lastName": "Silva", "position": "Marketing Designer", "office": "London", "age": 66, "startDate": "2012/11/27", "salary": "8,500.00", "extn": "5407", "email": "m.silva@datatables.net" },
{ "firstName": "Michael", "lastName": "Bruce", "position": "Javascript Developer", "office": "Singapore", "age": 29, "startDate": "2011/06/27", "salary": "3,000.00", "extn": "5407", "email": "m.bruce@datatables.net" },
{ "firstName": "Michelle", "lastName": "House", "position": "Integration Specialist", "office": "Sydney", "age": 37, "startDate": "2011/06/02", "salary": ",400.00", "extn": "5407", "email": "m.house@datatables.net" },
{ "firstName": "Olivia", "lastName": "Liang", "position": "Support Engineer", "office": "Singapore", "age": 64, "startDate": "2011/02/03", "salary": "4,500.00", "extn": "5407", "email": "o.liang@datatables.net" },
{ "firstName": "Paul", "lastName": "Byrd", "position": "Chief Financial Officer (CFO)", "office": "New York", "age": 64, "startDate": "2010/06/09", "salary": "5,000.00", "extn": "5407", "email": "p.byrd@datatables.net" },
{ "firstName": "Prescott", "lastName": "Bartlett", "position": "Technical Author", "office": "London", "age": 27, "startDate": "2011/05/07", "salary": "5,000.00", "extn": "5407", "email": "p.bartlett@datatables.net" },
{ "firstName": "Quinn", "lastName": "Flynn", "position": "Support Lead", "office": "Edinburgh", "age": 22, "startDate": "2013/03/03", "salary": "2,000.00", "extn": "5407", "email": "q.flynn@datatables.net" },
{ "firstName": "Rhona", "lastName": "Davidson", "position": "Integration Specialist", "office": "Tokyo", "age": 55, "startDate": "2010/10/14", "salary": "7,900.00", "extn": "5407", "email": "r.davidson@datatables.net" },
{ "firstName": "Sakura", "lastName": "Yamamoto", "position": "Support Engineer", "office": "Tokyo", "age": 37, "startDate": "2009/08/19", "salary": "9,575.00", "extn": "5407", "email": "s.yamamoto@datatables.net" },
{ "firstName": "Serge", "lastName": "Baldwin", "position": "Data Coordinator", "office": "Singapore", "age": 64, "startDate": "2012/04/09", "salary": "8,575.00", "extn": "5407", "email": "s.baldwin@datatables.net" },
{ "firstName": "Shad", "lastName": "Decker", "position": "Regional Director", "office": "Edinburgh", "age": 51, "startDate": "2008/11/13", "salary": "3,000.00", "extn": "5407", "email": "s.decker@datatables.net" },
{ "firstName": "Shou", "lastName": "Itou", "position": "Regional Marketing", "office": "Tokyo", "age": 20, "startDate": "2011/08/14", "salary": "3,000.00", "extn": "5407", "email": "s.itou@datatables.net" },
{ "firstName": "Sonya", "lastName": "Frost", "position": "Software Engineer", "office": "Edinburgh", "age": 23, "startDate": "2008/12/13", "salary": "3,600.00", "extn": "5407", "email": "s.frost@datatables.net" },
{ "firstName": "Suki", "lastName": "Burks", "position": "Developer", "office": "London", "age": 53, "startDate": "2009/10/22", "salary": "4,500.00", "extn": "5407", "email": "s.burks@datatables.net" },
{ "firstName": "Tatyana", "lastName": "Fitzpatrick", "position": "Regional Director", "office": "London", "age": 19, "startDate": "2010/03/17", "salary": "5,750.00", "extn": "5407", "email": "t.fitzpatrick@datatables.net" },
{ "firstName": "Thor", "lastName": "Walton", "position": "Developer", "office": "New York", "age": 61, "startDate": "2013/08/11", "salary": ",540.00", "extn": "5407", "email": "t.walton@datatables.net" },
{ "firstName": "Tiger", "lastName": "Nixon", "position": "System Architect", "office": "Edinburgh", "age": 61, "startDate": "2011/04/25", "salary": "0,800.00", "extn": "5407", "email": "t.nixon@datatables.net" },
{ "firstName": "Timothy", "lastName": "Mooney", "position": "Office Manager", "office": "London", "age": 37, "startDate": "2008/12/11", "salary": "6,200.00", "extn": "5407", "email": "t.mooney@datatables.net" },
{ "firstName": "Unity", "lastName": "Butler", "position": "Marketing Designer", "office": "San Francisco", "age": 47, "startDate": "2009/12/09", "salary": ",675.00", "extn": "5407", "email": "u.butler@datatables.net" },
{ "firstName": "Vivian", "lastName": "Harrell", "position": "Financial Controller", "office": "San Francisco", "age": 62, "startDate": "2009/02/14", "salary": "2,500.00", "extn": "5407", "email": "v.harrell@datatables.net" },
{ "firstName": "Yuri", "lastName": "Berry", "position": "Chief Marketing Officer (CMO)", "office": "New York", "age": 40, "startDate": "2009/06/25", "salary": "5,000.00", "extn": "5407", "email": "y.berry@datatables.net" },
{ "firstName": "Zenaida", "lastName": "Frank", "position": "Software Engineer", "office": "New York", "age": 63, "startDate": "2010/01/04", "salary": "5,250.00", "extn": "5407", "email": "z.frank@datatables.net" },
{ "firstName": "Zorita", "lastName": "Serrano", "position": "Software Engineer", "office": "San Francisco", "age": 56, "startDate": "2012/06/01", "salary": "5,000.00", "extn": "5407", "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>
我正在尝试仅删除对所有 table 列的排序。
我将以下链接放在我的申请文件中。
<!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>
我的 table 如下；
<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, :delimiter => ",", :precision => 2) %></td>
<td><%= number_with_precision(farhang.paid, :delimiter => ",", :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, :delimiter => ",", :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": "2,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": ",200,000.00", "extn": "5407", "email": "a.ramos@datatables.net" },
{ "firstName": "Ashton", "lastName": "Cox", "position": "Junior Technical Author", "office": "San Francisco", "age": 66, "startDate": "2009/01/12", "salary": ",000.00", "extn": "5407", "email": "a.cox@datatables.net" },
{ "firstName": "Bradley", "lastName": "Greer", "position": "Software Engineer", "office": "London", "age": 41, "startDate": "2012/10/13", "salary": "2,000.00", "extn": "5407", "email": "b.greer@datatables.net" },
{ "firstName": "Brenden", "lastName": "Wagner", "position": "Software Engineer", "office": "San Francisco", "age": 28, "startDate": "2011/06/07", "salary": "6,850.00", "extn": "5407", "email": "b.wagner@datatables.net" },
{ "firstName": "Brielle", "lastName": "Williamson", "position": "Integration Specialist", "office": "New York", "age": 61, "startDate": "2012/12/02", "salary": "2,000.00", "extn": "5407", "email": "b.williamson@datatables.net" },
{ "firstName": "Bruno", "lastName": "Nash", "position": "Software Engineer", "office": "London", "age": 38, "startDate": "2011/05/03", "salary": "3,500.00", "extn": "5407", "email": "b.nash@datatables.net" },
{ "firstName": "Caesar", "lastName": "Vance", "position": "Pre-Sales Support", "office": "New York", "age": 21, "startDate": "2011/12/12", "salary": "6,450.00", "extn": "5407", "email": "c.vance@datatables.net" },
{ "firstName": "Cara", "lastName": "Stevens", "position": "Sales Assistant", "office": "New York", "age": 46, "startDate": "2011/12/06", "salary": "5,600.00", "extn": "5407", "email": "c.stevens@datatables.net" },
{ "firstName": "Cedric", "lastName": "Kelly", "position": "Senior Javascript Developer", "office": "Edinburgh", "age": 22, "startDate": "2012/03/29", "salary": "3,060.00", "extn": "5407", "email": "c.kelly@datatables.net" },
{ "firstName": "Charde", "lastName": "Marshall", "position": "Regional Director", "office": "San Francisco", "age": 36, "startDate": "2008/10/16", "salary": "0,600.00", "extn": "5407", "email": "c.marshall@datatables.net" },
{ "firstName": "Colleen", "lastName": "Hurst", "position": "Javascript Developer", "office": "San Francisco", "age": 39, "startDate": "2009/09/15", "salary": "5,500.00", "extn": "5407", "email": "c.hurst@datatables.net" },
{ "firstName": "Dai", "lastName": "Rios", "position": "Personnel Lead", "office": "Edinburgh", "age": 35, "startDate": "2012/09/26", "salary": "7,500.00", "extn": "5407", "email": "d.rios@datatables.net" },
{ "firstName": "Donna", "lastName": "Snider", "position": "Customer Support", "office": "New York", "age": 27, "startDate": "2011/01/25", "salary": "2,000.00", "extn": "5407", "email": "d.snider@datatables.net" },
{ "firstName": "Doris", "lastName": "Wilder", "position": "Sales Assistant", "office": "Sydney", "age": 23, "startDate": "2010/09/20", "salary": ",600.00", "extn": "5407", "email": "d.wilder@datatables.net" },
{ "firstName": "Finn", "lastName": "Camacho", "position": "Support Engineer", "office": "San Francisco", "age": 47, "startDate": "2009/07/07", "salary": ",500.00", "extn": "5407", "email": "f.camacho@datatables.net" },
{ "firstName": "Fiona", "lastName": "Green", "position": "Chief Operating Officer (COO)", "office": "San Francisco", "age": 48, "startDate": "2010/03/11", "salary": "0,000.00", "extn": "5407", "email": "f.green@datatables.net" },
{ "firstName": "Garrett", "lastName": "Winters", "position": "Accountant", "office": "Tokyo", "age": 63, "startDate": "2011/07/25", "salary": "0,750.00", "extn": "5407", "email": "g.winters@datatables.net" },
{ "firstName": "Gavin", "lastName": "Joyce", "position": "Developer", "office": "Edinburgh", "age": 42, "startDate": "2010/12/22", "salary": ",575.00", "extn": "5407", "email": "g.joyce@datatables.net" },
{ "firstName": "Gavin", "lastName": "Cortez", "position": "Team Leader", "office": "San Francisco", "age": 22, "startDate": "2008/10/26", "salary": "5,500.00", "extn": "5407", "email": "g.cortez@datatables.net" },
{ "firstName": "Gloria", "lastName": "Little", "position": "Systems Administrator", "office": "New York", "age": 59, "startDate": "2009/04/10", "salary": "7,500.00", "extn": "5407", "email": "g.little@datatables.net" },
{ "firstName": "Haley", "lastName": "Kennedy", "position": "Senior Marketing Designer", "office": "London", "age": 43, "startDate": "2012/12/18", "salary": "3,500.00", "extn": "5407", "email": "h.kennedy@datatables.net" },
{ "firstName": "Hermione", "lastName": "Butler", "position": "Regional Director", "office": "London", "age": 47, "startDate": "2011/03/21", "salary": "6,250.00", "extn": "5407", "email": "h.butler@datatables.net" },
{ "firstName": "Herrod", "lastName": "Chandler", "position": "Sales Assistant", "office": "San Francisco", "age": 59, "startDate": "2012/08/06", "salary": "7,500.00", "extn": "5407", "email": "h.chandler@datatables.net" },
{ "firstName": "Hope", "lastName": "Fuentes", "position": "Secretary", "office": "San Francisco", "age": 41, "startDate": "2010/02/12", "salary": "9,850.00", "extn": "5407", "email": "h.fuentes@datatables.net" },
{ "firstName": "Howard", "lastName": "Hatfield", "position": "Office Manager", "office": "San Francisco", "age": 51, "startDate": "2008/12/16", "salary": "4,500.00", "extn": "5407", "email": "h.hatfield@datatables.net" },
{ "firstName": "Jackson", "lastName": "Bradshaw", "position": "Director", "office": "New York", "age": 65, "startDate": "2008/09/26", "salary": "5,750.00", "extn": "5407", "email": "j.bradshaw@datatables.net" },
{ "firstName": "Jena", "lastName": "Gaines", "position": "Office Manager", "office": "London", "age": 30, "startDate": "2008/12/19", "salary": ",560.00", "extn": "5407", "email": "j.gaines@datatables.net" },
{ "firstName": "Jenette", "lastName": "Caldwell", "position": "Development Lead", "office": "New York", "age": 30, "startDate": "2011/09/03", "salary": "5,000.00", "extn": "5407", "email": "j.caldwell@datatables.net" },
{ "firstName": "Jennifer", "lastName": "Chang", "position": "Regional Director", "office": "Singapore", "age": 28, "startDate": "2010/11/14", "salary": "7,650.00", "extn": "5407", "email": "j.chang@datatables.net" },
{ "firstName": "Jennifer", "lastName": "Acosta", "position": "Junior Javascript Developer", "office": "Edinburgh", "age": 43, "startDate": "2013/02/01", "salary": ",650.00", "extn": "5407", "email": "j.acosta@datatables.net" },
{ "firstName": "Jonas", "lastName": "Alexander", "position": "Developer", "office": "San Francisco", "age": 30, "startDate": "2010/07/14", "salary": ",500.00", "extn": "5407", "email": "j.alexander@datatables.net" },
{ "firstName": "Lael", "lastName": "Greer", "position": "Systems Administrator", "office": "London", "age": 21, "startDate": "2009/02/27", "salary": "3,500.00", "extn": "5407", "email": "l.greer@datatables.net" },
{ "firstName": "Martena", "lastName": "Mccray", "position": "Post-Sales support", "office": "Edinburgh", "age": 46, "startDate": "2011/03/09", "salary": "4,050.00", "extn": "5407", "email": "m.mccray@datatables.net" },
{ "firstName": "Michael", "lastName": "Silva", "position": "Marketing Designer", "office": "London", "age": 66, "startDate": "2012/11/27", "salary": "8,500.00", "extn": "5407", "email": "m.silva@datatables.net" },
{ "firstName": "Michael", "lastName": "Bruce", "position": "Javascript Developer", "office": "Singapore", "age": 29, "startDate": "2011/06/27", "salary": "3,000.00", "extn": "5407", "email": "m.bruce@datatables.net" },
{ "firstName": "Michelle", "lastName": "House", "position": "Integration Specialist", "office": "Sydney", "age": 37, "startDate": "2011/06/02", "salary": ",400.00", "extn": "5407", "email": "m.house@datatables.net" },
{ "firstName": "Olivia", "lastName": "Liang", "position": "Support Engineer", "office": "Singapore", "age": 64, "startDate": "2011/02/03", "salary": "4,500.00", "extn": "5407", "email": "o.liang@datatables.net" },
{ "firstName": "Paul", "lastName": "Byrd", "position": "Chief Financial Officer (CFO)", "office": "New York", "age": 64, "startDate": "2010/06/09", "salary": "5,000.00", "extn": "5407", "email": "p.byrd@datatables.net" },
{ "firstName": "Prescott", "lastName": "Bartlett", "position": "Technical Author", "office": "London", "age": 27, "startDate": "2011/05/07", "salary": "5,000.00", "extn": "5407", "email": "p.bartlett@datatables.net" },
{ "firstName": "Quinn", "lastName": "Flynn", "position": "Support Lead", "office": "Edinburgh", "age": 22, "startDate": "2013/03/03", "salary": "2,000.00", "extn": "5407", "email": "q.flynn@datatables.net" },
{ "firstName": "Rhona", "lastName": "Davidson", "position": "Integration Specialist", "office": "Tokyo", "age": 55, "startDate": "2010/10/14", "salary": "7,900.00", "extn": "5407", "email": "r.davidson@datatables.net" },
{ "firstName": "Sakura", "lastName": "Yamamoto", "position": "Support Engineer", "office": "Tokyo", "age": 37, "startDate": "2009/08/19", "salary": "9,575.00", "extn": "5407", "email": "s.yamamoto@datatables.net" },
{ "firstName": "Serge", "lastName": "Baldwin", "position": "Data Coordinator", "office": "Singapore", "age": 64, "startDate": "2012/04/09", "salary": "8,575.00", "extn": "5407", "email": "s.baldwin@datatables.net" },
{ "firstName": "Shad", "lastName": "Decker", "position": "Regional Director", "office": "Edinburgh", "age": 51, "startDate": "2008/11/13", "salary": "3,000.00", "extn": "5407", "email": "s.decker@datatables.net" },
{ "firstName": "Shou", "lastName": "Itou", "position": "Regional Marketing", "office": "Tokyo", "age": 20, "startDate": "2011/08/14", "salary": "3,000.00", "extn": "5407", "email": "s.itou@datatables.net" },
{ "firstName": "Sonya", "lastName": "Frost", "position": "Software Engineer", "office": "Edinburgh", "age": 23, "startDate": "2008/12/13", "salary": "3,600.00", "extn": "5407", "email": "s.frost@datatables.net" },
{ "firstName": "Suki", "lastName": "Burks", "position": "Developer", "office": "London", "age": 53, "startDate": "2009/10/22", "salary": "4,500.00", "extn": "5407", "email": "s.burks@datatables.net" },
{ "firstName": "Tatyana", "lastName": "Fitzpatrick", "position": "Regional Director", "office": "London", "age": 19, "startDate": "2010/03/17", "salary": "5,750.00", "extn": "5407", "email": "t.fitzpatrick@datatables.net" },
{ "firstName": "Thor", "lastName": "Walton", "position": "Developer", "office": "New York", "age": 61, "startDate": "2013/08/11", "salary": ",540.00", "extn": "5407", "email": "t.walton@datatables.net" },
{ "firstName": "Tiger", "lastName": "Nixon", "position": "System Architect", "office": "Edinburgh", "age": 61, "startDate": "2011/04/25", "salary": "0,800.00", "extn": "5407", "email": "t.nixon@datatables.net" },
{ "firstName": "Timothy", "lastName": "Mooney", "position": "Office Manager", "office": "London", "age": 37, "startDate": "2008/12/11", "salary": "6,200.00", "extn": "5407", "email": "t.mooney@datatables.net" },
{ "firstName": "Unity", "lastName": "Butler", "position": "Marketing Designer", "office": "San Francisco", "age": 47, "startDate": "2009/12/09", "salary": ",675.00", "extn": "5407", "email": "u.butler@datatables.net" },
{ "firstName": "Vivian", "lastName": "Harrell", "position": "Financial Controller", "office": "San Francisco", "age": 62, "startDate": "2009/02/14", "salary": "2,500.00", "extn": "5407", "email": "v.harrell@datatables.net" },
{ "firstName": "Yuri", "lastName": "Berry", "position": "Chief Marketing Officer (CMO)", "office": "New York", "age": 40, "startDate": "2009/06/25", "salary": "5,000.00", "extn": "5407", "email": "y.berry@datatables.net" },
{ "firstName": "Zenaida", "lastName": "Frank", "position": "Software Engineer", "office": "New York", "age": 63, "startDate": "2010/01/04", "salary": "5,250.00", "extn": "5407", "email": "z.frank@datatables.net" },
{ "firstName": "Zorita", "lastName": "Serrano", "position": "Software Engineer", "office": "San Francisco", "age": 56, "startDate": "2012/06/01", "salary": "5,000.00", "extn": "5407", "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>