首页 > 代码库 > datatable插件使用小记

datatable插件使用小记

2024-09-18 17:57:53   219人阅读

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

     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插件使用小记


联系
我们