2015-11-10 3 views
2

Я видел много потоков здесь, на SO, которые показывают, как реализовать поиск по вводу (поведение по умолчанию - это поиск после каждого нажатия клавиши), но по какой-то причине, когда я обрабатываю серверную обработку кода DataTables, игнорируется и поведение по умолчанию возвращается. Кто-нибудь знает, как начать поиск только после того, как пользователь нажал кнопку ввода?Результат поиска на стороне сервера DataTables по адресу

Это то, что я получил сейчас и поиск часть кода получает равнину игнорируется (также searchDelay не имеет никакого эффекта - вот от DataTables документации)

var adminRoles; 

$(document).ready(function() { 
    adminRoles = $('#adminRoles').dataTable({ 
     info: true, 
     order: [[0, 'asc']], 
     processing: true, 
     serverSide: true, 
     searchDelay: 500, //does't work 
     ajax: { 
      url: "@Url.Action("GetRoles","Admin")", 
      type: "POST" 
     }, 
     columnDefs: [ 
      { data: "Name", targets: 0 }, 
      { data: "KeyName", targets: 1 }, 
      { 
       data: "Id", 
       className: "text-center editDetail clickable", 
       render: function (data, type, row) { 
        return '<button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pencil text-primary" /></button>'; 
       }, 
       sortable: false, 
       searchable: false, 
       targets: 2 
      } 
     ], 
     language: { 
      url: '@Url.Content(@Resource.js_DataTables_Language)' 
     } 
    }).api(); 

    $('#adminRoles_filter input').unbind().bind('keypress', function (e) { 
     if (e.which == 13) { 
      alert('You pressed enter!'); //doesn't get hit 
      //adminRoles.search(this.value).draw(); 
     } 
     return; 
    }); 
}); 

ответ

5

Используйте initComplete возможность определить функцию, которая будет вызываться при таблица была инициализирована и используйте код ниже для поиска по . Введите ключ.

adminRoles = $('#adminRoles').dataTable({ 
    initComplete: function(){ 
     var api = this.api(); 
     $('#adminRoles_filter input') 
      .off('.DT') 
      .on('keyup.DT', function (e) { 
       if (e.keyCode == 13) { 
        api.search(this.value).draw(); 
       } 
      }); 
    }, 

    // ... skipped ... 

}); 
+0

Спасибо за ответ, к сожалению, это не работает. Поиск по-прежнему после каждого нажатия клавиши. Любые другие предложения? –

+0

@azzaidz, обновленный ответ –

+0

Спасибо Gyrocode.com это работает с версией 1.10.10, используя обработку на стороне сервера. –

0

Я понял. Проблема была связана с языком. Когда DataTables отображается, он ожидает, что языковой файл будет полностью прочитан, только тогда его можно будет отобразить. Привязать и отменить действия нельзя, потому что входного элемента там нет. Поэтому, чтобы встретить то, что я добавил его на fnInitComplete, как кто-то предложил его на форумах DataTables. Вам также понадобится fnFilterOnReturn.js

jQuery.fn.dataTableExt.oApi.fnFilterOnReturn = function (oSettings) { 
var _that = this; 

this.each(function (i) { 
    $.fn.dataTableExt.iApiIndex = i; 
    var $this = this; 
    var anControl = $('input', _that.fnSettings().aanFeatures.f); 
    anControl 
     .unbind('keyup search input') 
     .bind('keypress', function (e) { 
      if (e.which == 13) { 
       $.fn.dataTableExt.iApiIndex = i; 
       _that.fnFilter(anControl.val()); 
      } 
     }); 
    return this; 
}); 
return this; 

};

Код:

 ... 
     order: [[0, 'asc']], 
     processing: true, 
     serverSide: true, 
     "fnInitComplete": function (oSettings, json) { 
      adminRoles.fnFilterOnReturn(); 
     }, 
     ajax: ... 
Смежные вопросы