2016-11-01 3 views
-1

Я пытаюсь создать фильтр с List.js для поиска в моей таблице, заполненной JQuery.List.js удаляет данные JQuery при поиске

Демонстрация: https://jsfiddle.net/aqszp8qa/2/

Пример: Все детали '' ниже заполнены JQuery. Когда я начинаю с поиска List.js удаляет данные, которые не совпадают с вводом. Но когда я очищаю поиск, данные не возвращаются, потому что они были удалены.

Есть ли способ сохранить данные?

Thankyou ..

image

HTML

<div class="col-md-2"> 
     <div class="panel-title">Make<span class="pull-right"><i class="fa fa-sort"></i></span> 
     </div> 

     <div id="makes"> 
      <div class="form-group has-feedback" style="margin-top: 5px;"> 
       <input type="text" class="form-control search input-sm" placeholder="make"/> 
       <span class="glyphicon glyphicon-search form-control-feedback"></span> 
      </div> 
      <div style="border: 1px solid #ccc; border-radius: 3px; height: 100%;" class="pre-scrollable"> 
       <table class="table-no-borders" id="make"> 
        <!-- IMPORTANT, class="list" have to be at tbody --> 
        <tbody class="list" id="make-table-body"> 

        </tbody> 
       </table> 
      </div> 
     </div> 
    </div> 

Javascript

var makeOptions = {valueNames: ['make']}; 
var makeList = new List('makes', makeOptions); 



$('.clickable-table-row').on('click', function() { 
    var id = $(this).data('vehicle-id'); 
    $('#make-table-body').empty(); 
    $.get('/api/get/makes/by' + '/' + id, function (data) { 
     $.each(data, function (i, object) { 
      var tr = createTableRow('make-id', object.id); 
      var td = createTableData('make', object.name); 
      $('#make-table-body').append(tr.append(td)); 
     }); 
    }); 
}); 

function createTableRow(data_attribute, attribute_value) { 
    return $('<tr></tr>').addClass('clickable-table-row').attr("data-" + data_attribute, attribute_value); 
} 

function createTableData(className, value) { 
    return $('<td></td>').addClass(className).text(value); 
} 
+0

Да. Но нам нужно увидеть ваш код, чтобы помочь вам. –

ответ

0

Решение заключается в создании нового списка после того, как нагрузка динамически была закончена.

См: https://jsfiddle.net/aqszp8qa/4/

makeList = new List('makes', makeOptions); // solved the problem