【问题标题】:Datatables get value of searchable on a column数据表获取列上可搜索的值
【发布时间】:2017-06-06 19:44:16
【问题描述】:

我用以下代码创建了一个数据表:

userTable = $('#userTable').DataTable({
                serverSide: true,
                processing: true,
                ajax: {
                        url: "{!! route('listOfUsersAjax') !!}",
                        type: "GET",
                        dataSrc: function ( json ) {
                          //console.log(json);;
                            for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
                                if (json.data[i].is_manager == 1){
                                    json.data[i].is_manager = 'Yes';
                                }
                                else {
                                    json.data[i].is_manager = 'No';
                                }
                            }
                            return json.data;
                        }
                    },
                columns: [
                    {
                        className:      'details-control',
                        orderable:      false,
                        searchable:     false,
                        data:           null,
                        defaultContent: ''
                    },
                    { name: 'id', data: 'id' },
                    { name: 'name', data: 'name' },
                    { name: 'email', data: 'email' },
                    { name: 'is_manager', data: 'is_manager'},
                    { name: 'region', data: 'region' },
                    { name: 'country', data: 'country' },
                    { name: 'domain', data: 'domain' },
                    { name: 'management_code', data: 'management_code' },
                    { name: 'job_role', data: 'job_role' },
                    { name: 'employee_type', data: 'employee_type' },
                    {
                        name: 'actions',
                        data: null,
                        sortable: false,
                        searchable: false,
                        render: function (data) {
                            var actions = '';
                            actions += '<div class="btn-group btn-group-xs">';
                            actions += '<button data-toggle="tooltip" title="view" id="'+data.id+'" class="buttonView btn btn-success"><span class="glyphicon glyphicon-eye-open"></span></button>';
                            actions += '<button data-toggle="tooltip" title="edit" id="'+data.id+'" class="buttonUpdate btn btn-primary"><span class="glyphicon glyphicon-pencil"></span></button>';
                            actions += '<button data-toggle="tooltip" title="delete" id="'+data.id+'" class="buttonDelete btn btn-danger"><span class="glyphicon glyphicon-trash"></span></button>';
                            actions += '</div>';
                            return actions;
                        }
                    }
                    ],
                columnDefs: [
                    {
                        "targets": [1,3,4], "visible": false, "searchable": false
                    }
                    ],
                order: [[2, 'asc']],
                initComplete: function () {
                    this.api().columns().every(function () {
                        var column = this;
                        //console.log(userTable);
                        // Now we need to skip the first column as it is used for the drawer...
                        if(column[0][0] == '0' || column[0][0] == '11'){return true;};
                        var input = document.createElement("input");
                        $(input).appendTo($(column.footer()).empty())
                        .on('keyup change', function () {
                            column.search($(this).val(), false, false, true).draw();
                        });
                    });
                }
            } );

最后,您可以看到我放置了一个 initComplete 以使搜索列位于每列的底部。

当列不可搜索时,我不需要搜索,例如第一列和最后一列,因为它不可搜索。我正在使用列的编号并返回 true 以便它不会创建它但我想要更动态的东西并且如果列可搜索为 false 然后返回 true 那样我不需要指定的编号列。

感谢您的帮助。

【问题讨论】:

    标签: datatables


    【解决方案1】:

    确实可以通过this.api().init().columns 获得columns 定义。因此,您所要做的就是评估列 searchable 是否显式设置为 false(未定义可搜索或根本不定义列意味着 true,因为这是默认值):

    initComplete: function() {
      var columns = this.api().init().columns;
      this.api().columns().every(function(index) {
        if (!columns[index] || columns[index].searchable) {
           // column is searchable
         } else {
           // column is not searchable           
         }
       })  
     }
    

    【讨论】:

    • 不工作。但是当我做一个 console.log(index) 它告诉我 undefined
    • 好吧,我发现你不能在函数(索引)中使用索引,相反,你必须这样定义它:var column = this;索引=列[0][0];
    • @Richard 抱歉回复晚了,这是我写答案时的小提琴 -> jsfiddle.net/0f9Ljfjr/933 我怀疑您缺少index 的原因是原来是first introduced in 1.10.8我没想到,你可能使用的是旧版本的dataTables。
    猜你喜欢
    • 2022-12-13
    • 2016-04-23
    • 2016-11-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-04
    • 2020-04-04
    • 1970-01-01
    相关资源
    最近更新 更多