jquery datable修改搜索以不过滤选定的行

时间:2016-11-17 04:00:38

标签: javascript jquery datatables

这里是小提琴http://jsfiddle.net/LkqTU/32440/

我有一个jquery数据表,每行都有一个复选框。我希望如果选中该行上的复选框,那么在使用搜索框时,所选行将不会被隐藏。因此,例如,如果选择John并且搜索框为空,然后我在搜索框Fred中键入,则John在数据表中仍然可见,因为他已被选中。所以搜索框过滤器不适用于选定的行。

这是javascript。

function employee(id, firstName, lastName, dept, active) {
  var self = this;
  this.id = id;
  this.firstName = firstName;
  this.lastName = lastName;
  this.dept = dept;
  this.active = active;
}

function model() {
  var self = this;
  this.employees = [];
}

var mymodel = new model();

$(document).ready(function() {
  mymodel.employees.push(new employee('1', 'Clara', 'Dellinger', 'IT', false));
  mymodel.employees.push(new employee('2', 'John', 'Smith', 'HR', false));
  mymodel.employees.push(new employee('3', 'Fred', 'Jones', 'Finance', false));
  mymodel.employees.push(new employee('4', 'Mary', 'Jans', 'Finance', false));
  mymodel.employees.push(new employee('5', 'Bob', 'Jones', 'IT', false));
  mymodel.employees.push(new employee('6', 'Fred', 'Thebes', 'HR', false));
  mymodel.employees.push(new employee('7', 'Sally', 'Jane', 'HR', false));
  mymodel.employees.push(new employee('8', 'Patrick', 'Roberts', 'HR', false));
  mymodel.employees.push(new employee('9', 'Lisa', 'Myers', 'Lab', false));
  mymodel.employees.push(new employee('10', 'Roscoe', 'Coletrain', 'Security', false));
  var table = $('#mytable').DataTable({
    data: mymodel.employees,
    columns: [{
      data: 'active',
      render: function(data, type, row) {
        if (type === 'display') {
          return '<input type="checkbox" class="editor-active">';
        }
        return data;
      },
      className: "dt-body-center"
    }, {
      data: 'id'
    }, {
      data: 'firstName'
    }, {
      data: 'lastName'
    }, {
      data: 'dept'
    }],
    rowCallback: function(row, data) {
      // Set the checked state of the checkbox in the table
      $('input.editor-active', row).prop('checked', data.active);
    }
  });

  $('#mytable tbody').on('click', 'input[type="checkbox"]', function(e) {
    var active = $(this).prop('checked');
    var $row = $(this).closest('tr');
    var employee = table.row($row).data();
    employee.active = active;
    console.log(employee);
    table.row($row).data(employee).draw();
  });

});

这是html

<table class="table" id="mytable">
  <thead>
    <tr>
      <th>Select</th>
      <th>Id</th>
      <th>First</th>
      <th>Last</th>
      <th>Dept</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

0 个答案:

没有答案