Блог

Я использую таблицы данных jQuery, и я хотел бы знать, как я могу отфильтровывать строки моей таблицы, чтобы показывать и скрывать их в зависимости от состояния флажка. Если мой флажок «Скрыть» установлен, то скройте строки, где class = var, и если флажок не установлен, покажите строки, где class = var

Я настроил небольшую демонстрацию с возможностью скрывать / удалять нужные строки, но это не позволяет строкам появляться снова.

http://jsfiddle.net/bcraig/cY8Cn/2/

 $('#stock').DataTable({
    "sDom": '',
    "infoEmpty": "No entries to show", 
    "aaSorting": [ ], 
    "aoColumnDefs": [{ "bSortable": false,  "aTargets": [ 0 ]}],
});
var oTable = $('#stock').DataTable();   

$('#hide').click(function() {
    if ($(this).is(':checked')) {
        oTable.row('.takenstock, .takensold').remove().draw(true);
        $('label').text("Show taken");
    } else {
        oTable.draw();
        $('label').text("Hide taken");
    }
});
  

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

http://jsfiddle.net/cY8Cn/4/

Также здесь представлена документация по фильтрации из таблиц данных: http://www.datatables.net/development/filtering

 $('#stock').DataTable({
    "sDom": '',
    "infoEmpty": "No entries to show", 
    "aaSorting": [ ], 
    "aoColumnDefs": [{ "bSortable": false,  "aTargets": [ 0 ]}],
});
var oTable = $('#stock').DataTable();   

$.fn.dataTableExt.afnFiltering.push(
    function( oSettings, aData, iDataIndex ) {
      var nTr = oSettings.aoData[ iDataIndex ].nTr;

      if (($(nTr).hasClass('takenstock') || $(nTr).hasClass('takensold')) 
          amp;amp; $('#hide').is(':checked')) {
          return false;
      }
      else {
          return true;
      }
    }
);

$('#hide').click(function() {
    oTable.draw();

    if ($(this).is(':checked')) {
        $('label').text("Show taken");
    } else {
        $('label').text("Hide taken");
    }
});