前端常用功能记录(二)—datatables表格

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

app.get('/test/index', function(req, res) {
    var  data = [{name:'xiaojie',age:24,job:'developer',description:'humours'},{},{},{}]; //格式像这样,数据省略
    res.json({data:data});

});

<table class="table b-t b-light"  id="datatables">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>JOB</th>
          <th>描述</th>
　　　　　  <th>操作</th>  <!--自定义列-->
        </tr>
      </thead>
      <tbody>
      </tbody>
</table>

$(document).ready(function() {
    $('#datatables').dataTable( {

    } );
} );

<script type="text/javascript">
$(document).ready(function() {
    var table = $('#datatables').DataTable({
        "autoWidth": false,
        "paging": true,
        //"dom": 'T<"clear"><"toolbar">Clfrtip',
        "dom": 'iCflrtp',
        "iDisplayLength": 100,
        "lengthMenu": [[100, 500, 1000, -1], [100, 500, 1000, "所有"]],
        "tableTools": {
            "sSwfPath": "/js/datatables/tabletools/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                 {sExtends: "csv", oSelectorOpts: {page: "current" }},
                 "print"],
            "sRowSelect": "os",
        },
        "stateSave": false,
        "processing": true,
        "ajax": {
            'url': "/test/index",
        },
        "order": [
                [0, "asc"], 
                [1, "asc"], 
                [2, "desc"],
            ],
        "columnDefs": [
              {width: '25%', targets: 3},
            ],
        "columns": [{
            "data": "name",
        }, {
            "data": "age",
        }, {
            "data": "job",
        }, {
            "data": "description",
            "visible":false
        }],
        "sPaginationType": "full_numbers",
        "oLanguage": {
            "sProcessing": "<img src='/images/datatable_loading.gif'>  努力加载数据中.",
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "抱歉， 没有找到",
            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
            "sInfoEmpty": "没有数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            "sZeroRecords": "没有检索到数据",
            "sSearch": "模糊查询:  ",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
            }
        },
    });

l - Length changing  选择每页显示行数下拉框的控件
f - Filtering input  搜索过滤控件
t - The Tabletools    导出excel，csv的按钮
i - Information  显示汇总信息（从 1 到 100 /共 1,288 条数据）
p - Pagination   分页控件
r - pRocessing   显示加载时的进度条
C - copy 显示复制，excel的控件

下面四种是在dom中在自定义的位置植入自定义元素和class

< and > - DIV元素
<"class" and > - DIV和Class
<"#id" and > - DIV和ID
<"#id.class" and > - DIV 和ID 和Class

$("div.toolbar").html("<button class='btn btn-primary add_server' ><span>自定义按钮</span></button>");
        $(".add_server").click(function(){
          location.href ="/server/import"
})

/* Results in: 
    <div class="wrapper"> 
      {filter} 
      {length} 
      {information} 
      {pagination} 
      {table} 
    </div> 
*/  
$('#example').dataTable( {  
  "dom": '<"wrapper"flipt>'  
} );  

/* Results in: 
    <div> 
      {length} 
      {filter} 
      <div> 
        {table} 
      </div> 
      {information} 
      {pagination} 
    </div> 
*/  
$('#example').dataTable( {  
  "dom": '<lf<t>ip>'  
} ); 

/* Results in: 
    <div class="top"> 
      {information} 
    </div> 
    {processing} 
    {table} 
    <div class="bottom"> 
      {filter} 
      {length} 
      {pagination} 
    </div> 
    <div class="clear"></div> 
*/  
$('#example').dataTable( {  
  "dom": '<"top"i>rt<"bottom"flp><"clear">'  
} );

"tableTools": {
   "sSwfPath": "/js/datatables/tabletools/swf/copy_csv_xls_pdf.swf",
   "aButtons": [
      {sExtends: "csv", oSelectorOpts: {page: "current" },sFileName: "test.csv", //导出为csv文件，并且指定了文件的名称
      },
      "print", //打印控件
      "sRowSelect": "os",
},

 "ajax": {
            'url': "/test/index",
        },

"order": [
                [0, "asc"], 
                [1, "asc"], 
                [2, "desc"],
            ],
//表示先对第1列进行升序排序，再按照第二列升序排序，最后按照第三列降序排序

 "columnDefs": [
              {width: '25%', targets: 3},
            ],

 "columnDefs": [
                  // 将name列变为红色
                  {
                      "targets": [0], // 目标列位置，下标从0开始
                      "data": "name", // 数据列名
                      "render": function(data, type, full) { // 返回自定义内容
                          return "<span style='color:red;'>" + data + "</span>";
                      }
                  },
                  // 增加一列，包括删除和修改，同时将需要传递的数据传递到链接中
                  {
                      "targets": [4], // 目标列位置，下标从0开始
                      "data": "name", // 数据列名
                      "render": function(data, type, full) { // 返回自定义内容
                          return "<a href='/delete?name=" + data + "'>删除</a>&nbsp;<a href='/update?name=" + data + "'>更新</a>";
                      }
                  }
              ]

   "oLanguage": {
            "sProcessing": "<img src='/images/datatable_loading.gif'>  努力加载数据中.",
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "抱歉， 没有找到",
            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
            "sInfoEmpty": "没有数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            "sZeroRecords": "没有检索到数据",
            "sSearch": "模糊查询:  ",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
            }
        },

"rowCallback": function(row, data) { //data是后端返回的数据
    if(data.ip) {
      $('td:eq(3)', row).html('<a target="_blank" href=http://' + data.ip + '>' + data.ip + '</a>');
    }
},

//$('td:eq(3)', row)表示选中第四列的元素