Question

可以执行此操作吗？我想要一个字段搜索我的数据表。我创建了3个字段作为搜索选项。我正在使用postgresql我的数据库。

我检查了datatables插件。他们有我想要的字段过滤器，但如果我可以将字段放在数据表本身之外，我会更好。

更新：我发现它是可能的。我有代码，我收到错误DataTables warning: table_id = store_table - Cannot reinitialise DataTable.

这是我到目前为止所得到的：

我的javascript执行多个单独过滤：

$(document).ready(function () {

// DataTable
var dtable = $('#store_table').DataTable();

$('.search-button').on('click', function () {
    //clear global search values
    dtable.search('');
    $('.filter').each(function(){ 
    if(this.value.length){
      dtable.column($(this).data('columnIndex')).search(this.value);
    }
    });
    dtable.draw();
});

$( ".dataTables_filter input" ).on( 'keyup change',function() {
   //clear column search values
    dtable.columns().search('');
   //clear input values
   $('.filter').val('');
    }); 

});

我的html中应该过滤数据的表单

<form class="form-search">
            <div class="form-group row">
                <label for="shop_no" class="col-sm-2 col-form-label">Shop#</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control filter" id="shopNo" value='' data-column-index='0'/>
                </div>
            </div>
            <div class="form-group row">
                <label for="shop_name" class="col-sm-2 col-form-label">Shop Name</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control filter" id="shopName" value='' data-column-index='3'/>
                </div>
            </div>
            <div class="form-group row">
                <label for="shop_name" class="col-sm-2 col-form-label filter" value=''>Shop Kind</label>
                <div class="col-sm-4">
                    <div class="dropdown">
                        <button class="btn dropdown-toggle filter" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-column-index='2'>Select </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item filter" href="#">The Suite Company</a>
                            <a class="dropdown-item filter" href="#">Universal Language</a>
                            <a class="dropdown-item filter" href="#">OUT LET</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <button class="btn btn-warning search-button">Search</button>
                    <button class="btn btn-secondary">Clear</button>
                </div>
            </div>
        </form>

我如何使用html表单过滤数据表

0 个答案: