我正在构建一个简单的浏览文档页面。对于我的表格，我已经导出了dataTables模板（使用模板的新功能），但我希望将搜索栏(Class=search2)放在"keyword"搜索框而不是标准区域的位置。
但每次我移动搜索框类"search2"以替换"keyword"时，它都不会连接到数据表！
请您就如何做到这一点给我建议？
为什么我的页面上似乎有两件事（搜索2和过滤器）？
你可以找到小提琴here。
HTML代码
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="Stylesheets\table.css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.table').dataTable();
});
</script>
<body>
<div align="center">
<br><br>
<div id="table" class="outsideBorder" align="left">
<div style="font-size:large; margin:20px;" align="left"> Browse Documents</div>
<div style="font-size:x-small; margin-left:20px; margin-top:15px; margin-bottom:5px;" align="left"> Keyword</div>
<div style="float:left; width:80%; "><input style=" width:100%; margin-left:20px; height:26px;" type="text" class="keywords outsideBorderSearch"></div>
<div style="float:left; width:20%; "><button style="color:white; margin-left:10px; background-color:#f29030; border:none; height:26px;" type="button">SEARCH</button> </div>
<div style="float:left; width:33%; margin-left:20px; font-size:x-small; margin-top:20px;">Type
<br><br>
<select style="width:62%">
<option value="ALL">ALL</option>
<option value="Saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div style="float:left; width:33%; margin-left:10px; font-size:x-small; margin-top:20px;">Case/CYP
<br><br>
<select style="width:62%">
<option value="CASE">CASE</option>
<option value="Saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div style="float:left; width:20%; margin-left:10px; font-size:x-small; margin-top:20px;">Time
<br><br>
<select style="width:102%">
<option value="LAST MONTH">LAST MONTH</option>
<option value="Saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div style="margin-bottom:10px;">
<br><br><br><br><br>
</div></div>
<div class="wrap">
<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer"><div class="dataTables_length" id="DataTables_Table_0_length"><label>Show <select name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" class=""><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select> entries</label></div><div id="DataTables_Table_0_filter" class="dataTables_filter"><label>Search:<input type="search" class="search2" placeholder="" aria-controls="DataTables_Table_0"></label></div><table class="table table-hover dataTable no-footer" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
<thead>
<tr role="row"><th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label=" Type : activate to sort column ascending" style="width: 60px;"> Type </th><th class="sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" aria-sort="descending" style="width: 69px;">Name</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Date: activate to sort column ascending" style="width: 168px;">Date</th><th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" aria-label="Details: activate to sort column ascending" style="width: 97px;">Details</th></tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class=""><img src="http://cdn.toptenreviews.com/rev/misc/articles/7805/top-10-excel-ti-1.png" width="10"></td>
<td class="sorting_1">Moe</td>
<td>mary@example.com</td>
<td>Excel</td>
</tr><tr role="row" class="even">
<td class=""><img src="http://cybernetnews.com/wp-content/uploads/2009/09/PowerPoint.png" width="10"></td>
<td class="sorting_1">Moe</td>
<td>mary@example.com</td>
<td>PowerPoint</td>
</tr><tr role="row" class="odd">
<td class=""><img src="http://cybernetnews.com/wp-content/uploads/2009/09/PowerPoint.png" width="10"></td>
<td class="sorting_1">Dooley</td>
<td>july@example.com</td>
<td>PowerPoint</td>
</tr><tr role="row" class="even">
<td class=""><img src="http://www.lb5.uscourts.gov/img/icons/icon-doc.png" width="10"></td>
<td class="sorting_1">Doe</td>
<td>11-09-15</td>
<td>Doc</td>
</tr></tbody>
</table>
<div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 4 of 4 entries</div><div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate"><a class="paginate_button previous disabled" aria-controls="DataTables_Table_0" data-dt-idx="0" tabindex="0" id="DataTables_Table_0_previous">Previous</a><span><a class="paginate_button current" aria-controls="DataTables_Table_0" data-dt-idx="1" tabindex="0">1</a></span><a class="paginate_button next disabled" aria-controls="DataTables_Table_0" data-dt-idx="2" tabindex="0" id="DataTables_Table_0_next">Next</a></div></div>
</div>
</div>
CSS代码
.outsideBorder{
border-style:solid;
border-width:1px;
border-color: #cccccc;
width:580px;
height:100%;
font-family: 'Lato', sans-serif;
}
.outsideBorderSearch{
border-style:solid;
border-width:1px;
border-color: #cccccc;
width:600px;
height:300px;
font-family: 'Lato', sans-serif;
}
.random{
}
.wrap{
border-style:solid;
border-width:1px;
border-color: #cccccc;
width:580px;
padding:20px;
margin-top:30px;
border-radius: 5px;
font-family: 'Lato', sans-serif;
}
footer a {
color: #cccccc;
padding-left: 10px;
}
footer img {
height:45px;
width:45px;
padding-left: 5px;
}
form {
float:right;
padding-top: 10px;
padding-right: 10px;
}
.table img {
height: 25px;
width: 25px;
margin-left:15px;
}
答案 0 :(得分：1)
<强>解
您可以使用以下代码，其中.outsideBorderSearch是外部搜索框的选择器，.table是表格的选择器。
$('.outsideBorderSearch').on( 'keyup click', function () {
$('.table').DataTable().search(
$('.outsideBorderSearch').val()
).draw();
} );
<强>样本
请参阅updated jsFiddle以获取代码和演示。
备注
由于标记无效，您有两个重复的DataTables控件，很可能是您从动态生成的内容中复制/粘贴了HTML。您需要根据manual中提到的要求使用简单的HTML。