Datatables Search \ Filter Значение в столбце

Question

Я создал настраиваемое раскрывающееся меню для фильтрации значений в определенном столбце Datatables. Когда я пытаюсь фильтровать \ искать столбец с выбранным значением, то datatable остается неизменным.

DataTable и фильтр событий:

var table = $('#dt'); 
var dt = table.DataTable({ 
    ajax: { 
     type: 'POST', 
     cache: false, 
     url: '/DataTablesHandler' 
    }, 
    columns: [ 
     { 
      data: 'idLevel', 
      orderable: false, 
      targets: 'no-sort', 
      searchable: true 
     }, 
     { data: 'email' }, 
     { data: 'phone' }, 
     { data: 'fax' } 
    ], 
    order: [0, 'asc'], 
    processing: true, 
    serverSide: true, 
    orderMulti: false, 
    bStateSave: true 
}); 

//filter search on entity level change 
$('#workEntityLevel').on('change', function() 
{ 
    var levelID = $(this).val(); 

    if (levelID == 0) 
    { 
     //clear search 
     dt.search('').columns().search('').draw(); 
    } 
    else 
    { 
     //search idLevel column (NOT WORKING!!!)  
     dt.columns(0).search(levelID).draw(); 
    } 
}); 

Что я делаю неправильно?

Answer 1

Попробуйте что-нибудь подобное, когда ajax является отдельным (я не тестировал это, но вы поняли идею).

var tableDefinition = { 

     columns: [ 
      { 
       data: 'idLevel', 
       orderable: false, 
       targets: 'no-sort', 
       searchable: true 
      }, 
      { data: 'email' }, 
      { data: 'phone' }, 
      { data: 'fax' } 
     ], 
     order: [0, 'asc'], 
     processing: true, 
     serverSide: false, 
     orderMulti: false, 
     bStateSave: true 
    }; 

    $(function($) { 

     table = null; 
     $.ajax({url: '/DataTablesHandler', 
      type: "POST", 
      async: true, 
      // if you know what the initial parameters are 
      // create an object that emulates it here. 
      data : function() {JSON.stringify({ 'draw': 1, 'start': 0, 
         length:15 })}, 

      contentType: "application/json; charset=utf-8", 
      success: function (data) { 
       // fine tune your data. Mine comes back from a web service so this code fragment reflects that. 
       var parsedData = JSON.parse(data.d); 
       tableDefinition.data = parsedData; 

       var table = $('#dt'); 
       var dt = table.DataTable(tableDefinition); 
      }, 
      error: function(a,b,c) { debugger;} 
     }); 

     //filter search on entity level change 
     $('#workEntityLevel').on('change', function() 
     { 
      var levelID = $(this).val(); 

      if (levelID == 0) 
      { 
       //clear search 
       dt.search('').columns().search('').draw(); 
      } 
      else 
      { 
       //search idLevel column (NOT WORKING!!!)  
       dt.columns(0).search(levelID).draw(); 
      } 
     }); 

    }); 

Answer 2

Вот версия, которая включает в себя levelid в поиске на вызов AJAX, так что вы можете использовать его для фильтрации на стороне сервера

var table = $('#dt'); 
    var dt = table.DataTable({ 
     ajax: { 
      type: 'POST', 
      cache: false, 
      data: function (search) { 
       // fine tune what you need to send back here. 
       search.levelID = $('#workEntityLevel').val(); 
       return JSON.stringify(search)}, 
      dataType:"json", 
      url: '/DataTablesHandler' 
     }, 
     columns: [ 
      { 
       data: 'idLevel', 
       orderable: false, 
       targets: 'no-sort', 
       searchable: true 
      }, 
      { data: 'email' }, 
      { data: 'phone' }, 
      { data: 'fax' } 
     ], 
     order: [0, 'asc'], 
     processing: true, 
     serverSide: true, 
     orderMulti: false, 
     bStateSave: true 
    }); 

    //filter search on entity level change 
    $('#workEntityLevel').on('change', function() 
    { 
     dt.draw(); 
    });