2016-05-23 3 views
1

Я видел примеры того, как применять индивидуальный поиск столбцов для каждого столбца DataTable с помощью текстового поля или выпадающих меню, содержащих возвращаемые значения для каждого столбца. Тем не менее, я еще не сталкивался с каким-либо механизмом, чтобы применять их только к определенным столбцам. Например, при использовании ниже будет применяться текстовое поле поиска для всех, кроме coloumn нуля:Индивидуальный поиск столбцов в определенных столбцах, DataTable

$('#DataTable tfoot th:gt(0)').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" 
    style="width:120px;" placeholder="search ' + title + '" />'); 
}); 

Но, как бы я тогда и удалить его из колонки 6 & 7, например?

* UPDATE * Этот вопрос относится только к обработке на стороне сервера. Должно было заявить об этом раньше.

ответ

2

Я использую определение столбца в сочетании с iniComplete callBack. В этом примере два типа поиска, вы можете добавить множество различных запросов (даже не поиска)

$('#table').DataTable({ 
      "ajax": { 
       "url": "/flux/ajax", 
       "dataSrc": "data", 
       "scrollX": true 
      }, 
      "columns": [      
       {className: "select", "title": "Status", "data": "stat"} 
       {className: "text", "title": "Libellé", "data": "Lib"}} 
      ], 
      initComplete: function() { 

       this.api().columns().every(function() { 
        var column = this; 
        if ($(column.header()).hasClass('select')) { 
         console.log(column); 
         var select = $('<select><option value="">' + $(column.header()).html() + '</option></select>') 
           .appendTo($(column.header()).empty()) 
           .on('change', function (e) { 
            e.stopImmediatePropagation(); 
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val() 
              ); 
            column 
              .search(val ? '^' + val + '$' : '', true, false) 
              .draw(); 
            return false; 
           }); 
         column.data().unique().sort().each(function (d, j) { 
          select.append('<option value="' + d + '">' + d + '</option>'); 
         }); 
        } else if ($(column.header()).hasClass('text')) { 
         var text = $('<input type="text" placeholder="' + $(column.header()).html() + '" />') 
           .appendTo($(column.header()).empty()) 
           .on('keyup change', function() { 
            var val = $.fn.dataTable.util.escapeRegex(
             $(this).val() 
             ); 
            if (column.search() !== this.value) { 
             column 
               .search(val) 
               .draw(); 
            } 
            return false; 
           }); 

        } 

       }); 
      } 
     }); 
+0

Привет Sylvain, возможно, я должен добавить и что все это обработка на стороне сервера. Хорошая работа, хотя, я вижу, как это можно применить. – CSharpNewBee

Смежные вопросы