jquery+database+icheck

最近研究表格，研究jquery+database+icheck.

icheck：是raido和checkbox的美化插件。官方地址：http://www.bootcss.com/p/icheck/

可以接口定义单选和多选框的样式。

具体使用可以查看官网例子。

通过icheck 和database实现表格当前页的全选。

html代码：

table id="datatable-checkbox" class="table table-striped table-bordered bulk_action  ">
  <thead>
    <tr>
      <th>
        <input type="checkbox" id="check-all" class="flat"  >
      </th>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
      <th>Salary</th>
      <th>操作</th>
    </tr>
  </thead>

<tbody>
<tr class="even pointer">
<td class="a-center ">
  <input type="checkbox" class="flat" name="table_records">
</td>
<td class=" ">121000040</td>
<td class=" ">May 23, 2014 11:47:56 PM </td>
<td class=" ">121000210 <i class="success fa fa-long-arrow-up"></i></td>
<td class=" ">John Blank L</td>
<td class=" ">Paid</td>
<td class="a-right a-right ">$7.45</td>
<td class=" last"><a href="#">View</a>
</td>
<td class=" last"><button  class="btn btn-success" href="#">操作</button>
</td>
</tr><tr class="even pointer">

 

css：

     <link href="/static/css/buttons.bootstrap.css" rel="stylesheet">
    <link href="/static/css/dataTables.bootstrap.css" rel="stylesheet">
    <link href="/static/css/green.css" rel="stylesheet">

js:

    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/icheck.js"></script>
    <script src="/static/js/jquery.dataTables.min.js"></script>
    <script src="/static/js/dataTables.bootstrap.js"></script>

    <script src="/static/js/dataTables.buttons.min.js"></script>
    <script src="/static/js/buttons.bootstrap.min.js"></script>
    <script src="/static/js/custom.js"></script>

 

 这里需要注意的是：

因为database不是刷新请求页面，这样的话，在请求第二页的时候出现多选框样式问题。如下是解决方法：

$('.a-center').iCheck({
        handle: 'checkbox',
        checkboxClass: 'icheckbox_flat-green'
    });

 

需要注意的是：.a-center的  class的位置！！网上解决方案：https://stackoverflow.com/questions/21637458/datatables-icheck-pagination

如果用icheck的话，有个问题：database其他插件无法使用。暂时未找到解决方案。