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

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插件使用小记的更多相关文章

  1. jquery.datatable插件从数据库读取数据

    一.分页 分页的基本思想是根据datatable的页码及每页显示的行数,将数据从数据库分段提出,然后再填充到表格中,以达到分页的效果. 这里需要用到datatable插件的几个属性: "sE ...

  2. JQuery DataTable插件

    参考文件: http://blog.csdn.net/xuechongyang/article/details/8424897 http://blog.csdn.net/llhwin2010/arti ...

  3. 分享在MVC3.0中使用jQuery DataTable 插件

    前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...

  4. DataTable插件通过js导出Excel

    $('#myTab').DataTable( { serverSide: false,//分页,取数据等等的都放到服务端去. true为后台分页,每次点击分页时会请求后台数据,false为前台分页 d ...

  5. DataTable插件报错：Uncaught TypeError: Cannot read property 'style' of undefined

    DataTable插件报错:Uncaught TypeError: Cannot read property 'style' of undefined 原因:table 中定义的列和aoColumns ...

  6. dataTable插件锁表头和锁列的教程

    源代码下载 我的同事让我帮忙给弄个锁头锁列的插件.结果找到大名鼎鼎的jquery dataTable插件. 今天我们来介绍不常用的功能:dataTable插件锁表头和锁前两列 由于是移动前端.我们不考 ...

  7. select2插件使用小记2 - 多选联动 - 笔记

    这是select2插件使用的第二篇,可参考第一篇 select2插件使用小记.上一篇主要是关于基本的使用,这篇主要是关于多选,及联动的.侧重点不同. 效果图如下: 遵从W3C标准:结构.样式.行为.以 ...

  8. thinkphp5配合datatable插件分页后端处理程序

    thinkphp5配合datatable插件分页后端处理程序第一版DataTable.php v.1.0 <?php use think\Db; /** * DataTable.php. */ ...

  9. 基于bootstrap + php +ajax datatable 插件的使用

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 下面是我学习datatables写的一个服务器端(php)分页例子,该功能包含的功能 ...

随机推荐

  1. c# 产生随机数 程序所在路径

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Linux未安装上传下载的插件，怎么进行文件的上传下载

    首先连上服务: 然后Alt+p,打开SFTp窗口: 例如,我们今天要往tomcat的webappmu目录下上传一个文件: 先pwd,查看我们Linux上所处的目录:pwd 然后进入到tomcat的we ...

  3. Mybatis-Plus 实战完整学习笔记(十)------条件构造器核心用法大全（下）

    31.升序orderByAsc 31.升序orderByAsc List<Employee> employeeList = employeeMapper.selectList(new Qu ...

  4. mysql学习之路_字段类型与属性

    回顾 数据库基本知识:关系型数据库与非关系型数据库 关系型数据库:安全(磁盘) 非关系型数据库:高效(内存) 关系型数据库:建立在关系模型上的数据库, 数据结构:二维表(浪费空间) 数据库操作指令:s ...

  5. font-style字体设置

    用到一些字体找起来很麻烦,扒了一些 未测试 HTML,CSS,font-family:中文字体的英文名称 宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Mic ...

  6. asp.net文件上传下载

    泽优大文件上传产品测试 泽优大文件上传控件up6,基于php开发环境测试. 开发环境:HBuilder 服务器:wamp64 数据库:mysql 可视化数据库编辑工具:Navicat Premium ...

  7. 给公司服务器装web服务器，邮件服务器——安装SecureCRT

    系统用centos5.9 首先在window上安装SecureCRT终端 1:首先验证安装secureCRT的本地机和linux服务器能否ping的通: 2:判断linux 服务端是否安装了ssh 若 ...

  8. TCP、UDP网络通信

    IP地址和端口号 端口号是用两个字节(16位的二进制数)表示的,它的取值范围是0~65535,其中,0~1023之间的端口号用于一些知名的网络服务和应用, 用户的普通应用程序需要使用1024以上的端口 ...

  9. VS SVN

    AnkhSVN - Subversion Support for Visual Studio    直接包管理中就可以安装 VS2015和SVN合作 Visual Studio 添加SVN插件 Ank ...

  10. Android Studio开发之Gradle科普

    我们以前开发都是用 Eclipse ,而 Eclipse 大家都知道是一种 IDE (集成开发环境),最初是用来做 Java 开发的,而 Android 是基于 Java 语言的,所以最初 Googl ...