jQuery DataTables 使用手册(精简版)

转载请注明出处:http://www.cnblogs.com/shamoyuu/p/5182940.html

一、常用属性

//把公共的设置项都放在这里,就不需要每个页面都设置一遍了,放在jQuery对象上是为了避免污染全局变量$.dataTablesSettings = {
    processing : false,//是否显示加载中提示
    bAutoWidth : false,//是否自动计算表格各列宽度
    bPaginate : true,//是否显示使用分页
    bInfo : false,//是否显示页数信息
    sPaginationType : "full_numbers",//分页样式
    iDisplayLength : 10,//默认每页显示多少条记录
    searching : false,//是否显示搜索框
    bSort : false,//是否允许排序
    serverSide : true,//是否从服务器获取数据
    bStateSave : true,//页面重载后保持当前页
    bLengthChange : false,//是否显示每页大小的下拉框
    sServerMethod : "POST",
    language: {
        lengthMenu : "每页显示 _MENU_记录",
        zeroRecords : "没有匹配的数据",
        info : "第_PAGE_页/共 _PAGES_页",
        infoEmpty : "没有符合条件的记录",
        search : "查找",
        infoFiltered : "(从 _MAX_条记录中过滤)",
        paginate : { "first" : "首页 ", "last" : "末页", "next" : "下一页", "previous" : "上一页"}
    },    //这里是为ajax添加自定义参数
    fnServerParams : function (aoData) {
        aoData._rand = Math.random();
    }
};
//引用了上面的js文件后,在这里设置其他的参数//ajax的url$.dataTablesSettings.ajax = "/backend/content/load";//如果表格的高度大于这个值,tbody就会出现滚动条,而表头固定
$.dataTablesSettings.sScrollY = $(window).height() - 300;//是否开启垂直滚动(否=disabled)//设置具体的列名
$.dataTablesSettings.columns = [
    {data : "id"},
    {data : "title"},
    {data : "sort"},
    {data : "diffcity"},
    {data : "citys"},
    {data : "edittime"},
    {data : "editer"}
];//对列进行操作,这里只是替换掉第一列
$.dataTablesSettings.columnDefs = [{
    targets : [0],
    data : "id",
    render : function(data, type, row) {
        return "<a title=‘编辑‘ class=‘glyphicon glyphicon-edit nounderline‘ href=‘javascript:editTabRow(" + data + ");‘></a>&nbsp;"  +
               "<a title=‘复制‘ class=‘glyphicon glyphicon-duplicate nounderline‘ href=‘javascript:copyTabRow(" + data + ");‘></a>&nbsp;" +
               "<a title=‘删除‘ class=‘glyphicon glyphicon-trash nounderline‘ href=‘javascript:deleteTabRow(" + data + ");‘></a>";
    }
}];

二、事件

$.dataTablesSettings.fnDrawCallback = function(data){
    //每一次表格绘制完成时调用
};
$.dataTablesSettings.fnInitComplete = function(){
    //表格初始化时调用一次
};//还有其他不常用的,就不列举了

三、方法

//重绘方法。true会回到表格的初始状态,例如回到第一页,false只是重新加载当前页
dataTable.fnDraw(false);
//销毁方法。true会删除表格元素,而false不会,它只是销毁dataTable对象
dataTable.fnDestroy(false);
//换页方法,可以跳转到指定页。可选参数有"first", "previous", "next" , "last",或者是一个整数,0是第一页
dataTable.fnPageChange(0);

四、搜索案例

//这里是搜索的案例,不过自定义分页也可以这么做$("#searchBtn").on("click", function(){    //这里是为了解决搜索条件变化后,没有点搜索按钮,而是点换页后搜索条件也变化的bug
    var stitle = $("#stitle").val();
    var sdiffcity = $("#sdiffcity").val();
    var scity = $("#scity").val();
        //这里重新设置参数    $.dataTablesSettings.fnServerParams = function (aoData) {
        aoData.stitle = stitle;
        aoData.sdiffcity = sdiffcity;
        aoData.scity = scity;
        aoData._rand = Math.random();
    }
    //搜索就是设置参数,然后销毁datatable重新再建一个
    dataTable.fnDestroy(false);
    dataTable = $("#datatable").dataTable($.dataTablesSettings);    //搜索后跳转到第一页
    dataTable.fnPageChange(0);
});

五、注意事项

//当window尺寸改变时触发,以解决dataTable表头不自动适应的问题
$(window).resize(function() {
    dataTable && dataTable.fnDraw(false);
});
//在删除的ajax的success方法里需要这么写,如果当前页只有一条数据,删除后跳转到前一页start = $("#datatable").dataTable().fnSettings()._iDisplayStart;
total = $("#datatable").dataTable().fnSettings().fnRecordsDisplay();
dataTable.fnDraw(false);
if ((total - start) == 1) {
    if (start > 0) {
        $("#datatable").dataTable().fnPageChange("previous", true);
    }
}
时间: 2024-10-08 09:45:15

jQuery DataTables 使用手册(精简版)的相关文章

jQuery返回顶部(精简版)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery返回顶部</title> <style> *body{ background-attachment: fixed; background-image: url(about:blank); /* 必须的,防抖动 */} *body #t

jquery.dataTables动态列

jquery.dataTables  版本1.10.7 直接上代码: 0.table <table id="popReportTable"> <thead> <tr id="trId"> <td>显示名,这里可以给tr一个id,然后用$("#trId").html("列名...")来改变显示列名</td> </tr> </thead> <

让 Chrome 57 支持迅雷精简版

感觉下面步骤麻烦的,可以翻到文章最后,提供了全部文件打包,Chrome 扩展最好还是去 Chrome 商店安装 详细步骤 1. 安装迅雷精简版 迅雷精简版 1.5.3.288 最终更新官网下载 http://down.sandai.net/mini/ThunderMini_dl1.5.3.288.exe 2. 下载迅雷 Chrome 扩展额外支持包 http://plugin.xl7.xunlei.com/7.9/func/xl_ext_chrome_setup.exe 3. 使用 7zip 解

oracle10g精简版安装步骤

 Feng218 如果出现如下错误: 最好把360安全卫士全关了,再安装下,就没事了 然后安装完了进入时输入用户名:sys或者system 密码就是自己设好的密码进来之后如下所示 oracle10g精简版安装步骤,布布扣,bubuko.com

精简版搜索(search lite)

ES有两种格式的search api: "lite"--query string版本,这个版本期望所有的参数在请求中指定并传递 full request body版本期望得到一个JSON请求体,并且使用一个名为DSL的丰富的搜索语言 query string搜索对在使用命令行的即席查询(ad hoc queries)是很有用的.例如要查询type是tweet并且字段"tweet"包含"elasticsearch"单词的document: GET

MySql5.7.11 for Windows 安装精简版(一)

原文:MySql5.7.11 for Windows 安装精简版(一) 从官网下载压缩包,我下载的是64位的.解压. 精简: -Bin下只保留 mysqladmin.exe mysqld.exe mysql.exe Share目录下 保留charsets english 没有data文件夹一会告诉怎么生成 添加环境变量,mysql bin文件夹的路径 (如:C:\Program Files\MySQL\MySQL Server 5.6\bin )添加到Path中,当然之前的不要删了,用:隔开就好

安装虚拟机精简版centos7

相信大家都想在linux系统下开发,但是又希望自己的电脑是win.我与大家一样,所以今天就试着装虚拟机centos来区分开发. 首先安装虚拟机. 一.下载资源 1.虚拟机VMware Workstation 12 2.centos 7 镜像iso(我选的是精简版,完整版太大了.链接:http://isoredirect.centos.org) 二.建立centos虚拟机 根据 http://jingyan.baidu.com/article/676629974f3ac454d51b8437.ht

Jquery DataTables 获取表格数据及行数据

注意table变量是 1.jQuery DataTables 行号获取 $("#example tbody tr").on("click", function() {var index = $(this).context._DT_RowIndex; //行号}); 2.获取表格所有数据 function getTableContent(){ var nTrs = table.fnGetNodes();//fnGetNodes获取表格所有行,nTrs[i]表示第i行t

Windows7 SP1旗舰版精简版最终版本

2016年6月9号,老毛子@lopatkin大神针对Win7 SP1旗舰版精简版进行了最终更新,此次主要是之前小问题的修复和调整.该版为Windows 7 SP1 简体中文旗舰版最新版,包含2016年微软累积更新,经过国内众多系统爱好者检验,精简后体积比较小,适合低配电脑,非常稳定流畅!Win7爱好者们不妨下载收藏! 俄罗斯系统精简狂人@lopatkin 大侠一直专注于Windows操作系统的精简封装,每次微软有新的系统版本发布,他都会第一时间制作跟进发布.老毛子精简改进的系统以纯净流畅为主,无