代码之家 › 专栏 › 技术社区 › Wolfzmus

数据表搜索筛选器

datatable

Wolfzmus · 技术社区 · 6 年前

var table = $("#tbl_multipoinfo");
        var filter = $('.form-filterpo');
        var target = table.attr('data-table');
        $("#pideldate").datepicker({
            dateFormat: 'yy-mm-dd'                                    
        });

        var oTable = table.on( 'processing.dt', function ( e, settings, processing ) {
                if (processing) {
                    $(this).find('tbody').addClass('load1 csspinner');
                } else{
                    $(this).find('tbody').removeClass('load1 csspinner');
                };
            } ).DataTable({
                "ajax": host+'datatable/'+target,
                "bServerSide": true,
                "order": [[ 1, "desc" ]],
                "bFilter" : true,
                "scrollY":        "200px",
                "scrollCollapse": true,
                "paging":         false,
                "paging":         false,
                "ordering": false
            });

        $('.dataTables_filter input').unbind().keyup(function(e) {
             var value = $(this).val();
             if (value.length>0) {
                oTable.search(value).draw();
            } else {     
                //optional, reset the search if the phrase 
                //is less then 3 characters long
                oTable.search('').draw();
            } 
        });

但它不会让我过滤,结果还是一样。我可能会遗漏一些东西,所以有人能帮我解决这些问题吗??

1 回复 | 直到 6 年前

Wolfzmus 6 年前

我找到了解决方案,我改变了数据表上的代码

"bServerSide": true,

我删除了它,然后再输入一个类似这样的输入

<form class="form-filterpo" role="form">
                    <div class="row">
                        <div class="col-md-3 pull-right" style="padding-bottom:5px;">
                            <label>PO : </label>
                            <input id="fPono" class="form-control input-sm" type="text">
                        </div>
                    </div>
                </form>

并将这些添加到jquery上(jquery my table中相同)

$('#tbl_multipoinfo_filter').remove();

        filter.find('#fPono').keyup(function(){
            var fPono = $(this).val();
            oTable.columns(1).search(fPono).draw();
        });

注意:如果你在服务器端尝试把查询放在where上,对于我的例子,我不使用query cause我的查询,而是在每一行上使用临时的need check list。

推荐文章

Shubham · 如何在R中查找数据表的两个多类别列之间的差异/setdiff()

2 年前

CRaw · 表格中的标题文本对齐:前2个单元格左对齐,后3个单元格右对齐

2 年前

ParaPrototype · 如何在单列可搜索数据表中求和合计以及如何添加日期范围

2 年前

Jafar Khan · 如何使用laravel和ajax方法添加angular 12数据表

3 年前

ColinA · Powershell从datatable更改输出对象名称

3 年前

Davide Vitali · 填充后的ListView为空

6 年前

mfg · 分页不显示在datatable中

6 年前

znstrider · Bokeh-更新渲染器和DataTable的源-使用回调?

6 年前

DotNetSpartan · 如何在datagrid中绑定到数据表的空行的第一个单元格上设置光标

6 年前

Gerle Batde · 如何使用Datatable C跳过=<2个空行?

6 年前