datatable插件使用小记

Posted ESnail

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了datatable插件使用小记相关的知识,希望对你有一定的参考价值。

  经验,是前行路上,磕磕碰碰,不断探索,最终留下的结晶;亦是下一次,快速高效,寻求到结果的快捷方式。

     datatable插件具体可参考:

  官网:http://datatables.club/
  参数说明:http://www.cnblogs.com/hyywaq/p/5919412.html

  html页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 页面引入css样式 -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/datatable/css/dataTables.bootstrap.min.css"> 
</head>
<body>
    
    <table id="data_table" class="table table-bordered table-striped table-hover" width="100%">
        <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>任务</th>
            <th>日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="data_list">
            
        </tbody>
    </table>
    
    <!-- require.js  模块化 -->
    <script src="js/common/libs/require.js" data-main="js/list"></script>
</body>
</html>

  js:

 //定义js文件路径,相对页面的路径
require.config({
    paths: {
        jquery: \'js/common/libs/jquery.min\',
        \'datatables.net\': \'js/common/libs/datatable/jquery.dataTables.min\',
        dbBootstrap: \'js/common/libs/datatable/dataTables.bootstrap.min\'
    },
    shim: {
        \'datatables.net\':{
            deps:[\'jquery\']
        },
        \'dbBootstrap\':{
            deps:[\'jquery\',\'datatables.net\']
        }
    }
});

require([\'dbBootstrap\'],function(){
   var util = {
   table:{},
//获取列表信息 getListInfo:function(){ var listUrl = \'\', base_url = window.location.host; util.table = $(\'#data_table\').dataTable({ language: { "sProcessing": "处理中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果,共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "表中数据为空", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } }, "pagingType":\'full_numbers\', // 分页 "aoColumnDefs": [{"bSortable":false, "aTargets": [4]}], //第5列不排序,其余排序 "order":[[3,\'desc\']], // 默认按时间倒序 排序 //ajax请求 \'processing\':true, \'serverSide\':true, \'ajax\':{ \'url\':listUrl, \'dataSrc\': function(result) { if(result && result.data && !$.isEmptyObject(result.data)){ return result.data; }else{ return []; } } }, \'columns\':[ // 表格数据是obj是映射显示 {data:\'id\'}, {data:\'name\'}, {data:\'task\'}, {data:\'time\'}, {data:function(data){ if(data && data.status && data.status===\'pending\'){ return \'<a class="pending">进行中</a>\'; } return \'<a class="link-text" href="http://\'+base_url+\'/detail?id=\'+data.id+\'">查看</a>\'; }} ] }); // 响应式处理,始终保持分页、搜索等控件在表格的四个角落 var el = [\'data_table_length\',\'data_table_filter\',\'data_table_info\',\'data_table_paginate\']; for(var i=0, len=el.length; i<len; i++){ $(\'#\'+el[i]).parent().removeClass(\'col-sm-6\').addClass(\'col-xs-6\'); }; } }; util.getListInfo(); });

  特别注意:当需要刷新表格数据,即重新渲染表格时,只需按照下面的方式操作即可:

 //刷新当表格
reload:function(flag){
    setInterval(function(){
        if(flag){
            util.table.api().ajax.reload(null, true); // 调用插件的方法,第一个参数是回调,第二个参数是:true-重置分页,false-保持之前的分页信息
        }
    },1000*10);
}

  

 

以上是关于datatable插件使用小记的主要内容,如果未能解决你的问题,请参考以下文章

如何在DataTables 1.10中使用JQuery DataTables“input”插件

vim代码片段插件ultisnips的使用

select2插件使用小记

maven shade插件小记

JQuery DataTable 插件宽度问题

Wordpress - 将代码片段包含到布局的选定部分的插件