dataTables学习应用

 

官方网站：http://datatables.club/example/

引入jquery.dataTables.js

 

表格增删改查

表格编辑参考例子

html

 <div class="col-md-12 col-lg-9">
                    <div class="panel panel-widget">
                      <div class="panel-title">
                        部门管理 <span class="label label-warning deptCounter"></span>
                        <ul class="panel-tools">
                          <li><a class="icon search-tool"><i class="fa fa-search"></i></a></li>
                          <li><a class="icon minimise-tool"><i class="fa fa-minus"></i></a></li>
                          <li><a class="icon closed-tool"><i class="fa fa-times"></i></a></li>
                        </ul>
                      </div>
              
                      <div class="panel-search">
                        <form>
                          <input type="text" class="form-control" placeholder="搜索" id="myinput">
                          <i class="fa fa-search icon"></i>
                        </form>
                      </div>
              
              
                      <div class="panel-body table-responsive">
              
                        <table class="table table-hover table-striped" id="system_dept_manage_table">
                          <thead>
                            <tr>
                              <th><input type="checkbox" class="allCheckDept"/></th>
                              <td>序号</td>
                              <td>部门名称</td>
                              <td>父部门</td>
                              <td>状态</td>
                              <td>操作</td>
                             
                            </tr>
                          </thead>
                          <tbody class="table_dept">
                           
                            
                          </tbody>
                        </table>
              
                      </div>
                    </div>
                  </div>

 

表格搜索

// 搜索
    $('#myinput').on('keyup', function () {
        var search = this.value
        $('#system_dept_manage_table tbody tr').hide().filter(':contains(' + search + ')').show();

    });

 

表格全选

//获取表格多选的值
var id = [];
$('input[name="DeptC"]:checked').each(function () {
      id.push($(this).val());
});



 
    $('.allCheckDept').on('click', function () {
        swapDeptCheck(isCheckAll)
    });


     //checkbox 全选/取消全选
     var isCheckAll = false;
    function swapDeptCheck() {
        if (isCheckAll) {
            $("input[type='checkbox'][name='DeptC']").each(function () {
                this.checked = false;
            });
            isCheckAll = false;
        } else {
            $("input[type='checkbox'][name='DeptC']").each(function () {
                this.checked = true;
            });
            isCheckAll = true;
        }
    }