2017-06-06 63 views
2

我创建了一个数据表与下面的代码一栏搜索的价值:数据表得到

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,以便它不创建它,但我想要更动态的东西,并有一个if列可搜索为false,然后返回true,我不需要指定柱。

感谢您的帮助。

回答

1

columns定义可通过this.api().init().columns。因此,所有你需要做的是,如果searchable明确一列设置为false评估(不定义搜索或不定义列都意味着真实的,因为这是默认值):

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   
    } 
    }) 
} 
+0

不工作。但是,当我做一个console.log(索引)它告诉我undefined – Richard

+0

好吧,我发现你不能在函数(索引)中使用索引,相反,你必须这样定义它:var column = this; index = column [0] [0]; – Richard

+0

@Richard对不起,对于迟到的回应,这是我写的答案 - - ** http http://jsfiddle.net/0f9Ljfjr/933/**小提琴我怀疑你失踪的原因索引是它是[**首先在1.10.8 **中引入](https://datatables.net/reference/api/columns().every()#Type)我没有想到这一点,你可能使用的是旧版本的数据表。 – davidkonrad