如何使用jQuery DataTables的外部搜索框

我正在構建一個簡單的瀏覽文檔頁面。對於我的表格，我已經導出了dataTables模板（New to using templates），但是我希望將搜索欄(Class=search2)放置在搜索框的"keyword"而不是其標準區域。如何使用jQuery DataTables的外部搜索框

但是我每次移動搜索框類"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>[email protected]</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>[email protected]</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>[email protected]</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>

JavaScript代碼

.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; 
}

來源

2015-09-24 user2465853

檢查[this]（https://jquery-datatables-column-filter.googlecode.com/svn/trunk/external.html）。 – deepakb

SOLUTION

您可以使用以下代碼，其中.outsideBorderSearch是外部搜索框的選擇器，.table是表的選擇器。

$('.outsideBorderSearch').on('keyup click', function() { 
    $('.table').DataTable().search(
     $('.outsideBorderSearch').val() 
    ).draw(); 
});

DEMO

見updated jsFiddle代碼和演示。

注意

你有兩個重複的數據表控件，因爲無效的標記，最有可能複製從動態生成的內容/粘貼HTML。您需要根據manual中提到的要求使用簡單的HTML。

來源

2015-09-24 12:25:18

非常感謝！它工作得很好，我之前沒有看到手冊，所以再次感謝您的鏈接:) – user2465853

如何使用jQuery DataTables的外部搜索框

回答

相關問題