[英]how to add a button inside a dropdown select using jQuery
我正在使用jQuery DataTables 。 在表尾,我在每一列上添加了bootstrap-select來過濾數據。
我想在 select 下拉列表中添加一個按鈕“清除過濾器”,如下所示:
按鈕的 position 沒關系,可以在搜索框下方,也可以在末尾...
因此,包裝搜索框的div
有一個 class .bs-searchbox
所以我所做的是:在當前列中找到帶有 class 的div
,然后在里面找到 append 我的按鈕。
var button = column.find('.bs-searchbox');
$('<button type="button" class="btn btn-sm btn-light">Clear filter</button>').appendTo(button);
jQuery 無法將.find
識別為 function。 請在下面找到我的代碼的詳細說明。
你能告訴我我做錯了什么嗎? 非常感謝。
$(document).ready(function() { var table = $('#example').DataTable({ searching: false, info: false, paging: false, initComplete: function() { // loop through each colum in my datatable this.api().columns().every(function() { var column = this; //append bootstrap selectpicker (multiple) on footer of current colum var select = $('<select class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple></select>').appendTo($(column.footer()).empty()); //get unique values of each column and append as options column.data().unique().sort().each(function(d, j) { select.append('<option value="' + d + '">' + d + '</option>'); }); //add button 'clear filter' inside the select after search box /* var button = column.find('.bs-searchbox'); $('<button type="button" class="btn btn-sm btn-light">Clear filter</button>').appendTo(button); */ }); //apply bootstrap selectpicker $("select").selectpicker(); } }); });
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"> <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/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> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script> <table id="example" class="table table-bordered table-hover nowrap" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> </tr> </thead> <tbody> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> </tr> </tbody> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> </tr> </tfoot> </table>
嘗試在$("select").selectpicker();
之后添加按鈕
請參見下面的代碼。
$(document).ready(function() {
var table = $('#example').DataTable({
searching: false,
info: false,
paging: false,
initComplete: function() {
// loop through each colum in my datatable
this.api().columns().every(function() {
var column = this;
//append bootstrap selectpicker (multiple) on footer of current colum
var select = $('<select class="form-control show-tick" data-container="body" data-header="Select option(s)" data-actions-box="true" data-live-search="true" title="All" data-selected-text-format="count > 0" multiple></select>')
.appendTo($(column.footer()).empty());
//get unique values of each column and append as options
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});
//apply bootstrap selectpicker
$("select").selectpicker();
var button = $('.bs-searchbox');
$('<button type="button" class="btn btn-sm btn-light">Clear filter</button>').appendTo(button);
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.