jquery datatables 学习笔记

最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables。

功能是很强大,但是网上的例子比较少。在经过一段时间的努力可算是搞出来了。

官网地址:http://www.datatables.net/

官网上的例子比较简单,基础的介绍还是要看看的。

效果图

 

引入相应css 和js 

    <link href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css" rel="stylesheet" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>

页面HTML

 <div class="portlet-body p10"><div class="form-body "><div class="row"><div class="col-md-5"><div class="form-group"><label class="control-label col-md-3">User Name: </label><div class="col-md-6"><input id="txt_UserName" name="txt_UserName" type="text" value="" /><span class="help-block">This is inline help </span></div></div></div><!--/span--><div class="col-md-5"><div class="form-group"><label class="control-label col-md-4">Division:</label><div class="col-md-6 form-inline"><select id="Sel_Division" name="Gender"><option value="">全部</option><option value="A">A</option><option value="B">B</option></select></div></div></div><!--/span--></div><div class="row"><div class="col-md-5"></div><!--/span--><div class="col-md-5"><div class="form-group"><button type="submit" id="btn_Search" class="btn green">Search</button></div></div><!--/span--></div></div></div><div class="portlet-body p10"><table class="table table-striped table-bordered table-hover" id="UserList"><thead><tr><th>User ID</th><th>User Ename</th><th>AD Account</th><th>User Email</th><th>Division</th><th>Entity</th><th>IsValid</th><th>Operation</th></tr></thead></table></div>

 

 

我这里用到的是 服务器端处理。(很少有人把数据全部取出来,让js 处理的吧。。。)

JS 代码 初始化

var oTable = null;
var initUserList = function () {var table = $('#UserList');
if (oTable == null) { //仅第一次检索时初始化Datatable   oTable = table.dataTable({"bLengthChange": false, //改变每页显示数据数量"bFilter": false, //过滤功能"bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候,开启此功能比较好"bServerSide": true, //开启服务器模式,使用服务器端处理配置datatable。注意:sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。"iDisplayLength": 10,//每页显示10条数据//ajax地址 "sAjaxSource": "/Home/Home/GetUserList",// get地址//"sAjaxSource": "/Home/Home/UserListPost",// post地址"fnServerData": retrieveData,//执行方法//默认排序"order": [[0, 'asc']//第一列正序
            ],"lengthMenu": [[5, 15, 20, -1],[5, 15, 20, "All"] // change per page values here
            ],// set the initial value"pageLength": 10,//向服务器传额外的参数"fnServerParams": function (aoData) {aoData.push({ "name": "UserName", "value": $('#txt_UserName').val() },//员工名字{ "name": "Division", "value": $('#Sel_Division').val() })//所处Division},//配置列要显示的数据"columns": [{ "data": "User_ID" },{ "data": "User_Ename" },{ "data": "AD_Account" },{ "data": "User_Email" },{ "data": "Division" },{ "data": "Entity" },{ "data": "IsValid" },{ "data": "" }//操作按钮列],//按钮列"columnDefs": [//{//    "targets": -2,//编辑//    "data": null,//    "defaultContent": "<button id='editrow' class='btn btn-primary' type='button'><i class='fa fa-edit'></i></button>"//},
            {"targets": -1,//删除"data": null,"defaultContent": "<button id='editrow' class='btn btn-primary' type='button'><i class='fa fa-edit'></i></button><button id='delrow' class='btn btn-primary' type='button'><i class='fa fa-trash-o'></i></button>"}] ,//语言配置--页面显示的文字"language": {"aria": {"sortAscending": ": activate to sort column ascending","sortDescending": ": activate to sort column descending"},"emptyTable": "No data available in table","info": "Showing _START_ to _END_ of _TOTAL_ entries","infoEmpty": "No entries found","infoFiltered": "(filtered1 from _MAX_ total entries)","lengthMenu": "Show _MENU_ entries","search": "Search:","zeroRecords": "No matching records found"}});}//刷新Datatable,会自动激发retrieveData   
    oTable.fnDraw();// tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
}

function retrieveData(sSource, aoData, fnCallback) {/* get 方法调用*/$.ajax({"type": "get","contentType": "application/json","url": sSource,"dataType": "json","data": aoData, "success": function (resp) {fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式  
        }});/* Post 方法调用$.ajax({"type": "post","url": sSource,"dataType": "json","data": aoData,"success": function (resp) {fnCallback(resp); //服务器端返回的对象的returnObject部分是要求的格式  }});*/
}
 

 

 
  jQuery(document).ready(function () {initUserList()//搜索$("#btn_Search").click(function () {initUserList()})//按钮的绑定事件要放到document或者其他父标签上,因为元素是在datatable方法加载完成之后才显示出来的//编辑$(".portlet-body").on('click', 'button#editrow', function () {var data = $("#UserList").DataTable().row($(this).parents("tr")).data();alert(data.User_Ename + "'s Division is: " + data.Division);});//删除$(".portlet-body").on('click', 'button#delrow', function () {var data = $("#UserList").DataTable().row($(this).parents("tr")).data();alert("Do you want delete " + data.User_Ename + "?");});});

 

后台代码

开启后台处理之后,每次翻页、排序都会调用代码中配置的地址:/Home/Home/GetUserList

回传很多参数,我们这里只用到这几个:

页面大小:iDisplayLength

开始数:iDisplayStart(是开始数不是当前页数...)

要排序的列序号:iSortCol_0(从零开始)

正序还是倒序:sSortDir_0(desc or asc)

获取第一列列明:mDataProp_0(从零开始)

好了上代码

 
[HttpGet]public string GetUserList(){//JsonConvert.PopulateObject(var re = new UserRequest();//获取页面大小if (string.IsNullOrWhiteSpace(Request["iDisplayLength"]))re.PageSize = 10; elsere.PageSize = int.Parse(Request["iDisplayLength"]);//获取开始数 算出当前页数if (string.IsNullOrWhiteSpace(Request["iDisplayStart"]))re.PageIndex = 1; elsere.PageIndex = (int.Parse(Request["iDisplayStart"]) / re.PageSize) + 1;//自定义的两个参数 Division和UserNameif (!string.IsNullOrWhiteSpace(Request["Division"]))re.Division = Request["Division"];if (!string.IsNullOrWhiteSpace(Request["UserName"]))re.User_Ename = Request["UserName"];//排序if (!string.IsNullOrWhiteSpace(Request["iSortCol_0"]) && !string.IsNullOrWhiteSpace(Request["sSortDir_0"]))re.OrderBy = Request[("mDataProp_" + Request["iSortCol_0"])];// +" " + Request["sSortDir_0"];elsere.OrderBy = Request[("mDataProp_0")];//正序还是倒序if(!string.IsNullOrWhiteSpace(Request["sSortDir_0"]))re.Isdesc=(Request["sSortDir_0"]=="descdesc"?true:false);var result = new DataResult();var data = this.AccountService.GetUserList(re);//获取数据的方法result.recordsTotal = data.TotalItemCount;result.recordsFiltered = data.TotalItemCount;result.data = data;return JsonConvert.SerializeObject(result);}
 
 public class UserRequest : Request{public UserRequest() { Isdesc = false; }public string User_Ename { get; set; }public string Division { get; set; }public bool IsValid { get; set; }public long User_ID { get; set; }public string OrderBy { get; set; }public bool Isdesc { get; set; }}

 



 public class DataResult{public int draw { get; set; }public int recordsTotal { get; set; }public int recordsFiltered { get; set; }public object data;}
 

 

 

 

 基本就这些了。嘿嘿,本人技术稀烂,大神见笑了。

转载于:https://www.cnblogs.com/178mz/p/4383519.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/574689.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql中的double类型_MySQL中float、double、decimal三个浮点类型的区别与总结!

作者&#xff1a;极客小俊 一个专注于web技术的80后我不用拼过聪明人&#xff0c;我只需要拼过那些懒人 我就一定会超越大部分人!CSDN极客小俊&#xff0c;原创文章, B站技术分享个人博客: cnblogs.com前端htmlcssjavascript技术讨论交流群: 281499395后端phpmysqlLinux技术交流…

当电压放大电路的开路增益和输出电阻固定后_晶体管放大电路的性能分析与应用...

关于三极管共射极放大电路的基本分析方法(见附录1)&#xff0c;我们之前有聊过。本文重点与大家分享下电路的性能分析&#xff0c;尤其电路的频率响应与选频特性&#xff0c;还是非常有趣的。主要内容有&#xff1a;输入输出电阻通频带如何提高放大倍数1节5号电池可以放大电路吗…

移动设备和SharePoint 2013 - 第5部分:自定义应用

博客地址&#xff1a;http://blog.csdn.net/foxdave原文地址在该系列文章中&#xff0c;作者展示了SharePoint 2013最显著的新功能概观——对移动设备的支持。该系列文章&#xff1a;移动设备和SharePoint 2013 - 第1部分&#xff1a;概述移动设备和SharePoint 2013 - 第2部分&…

java递归实现多级菜单栏_java利用递归调用实现树形菜单的样式

一&#xff1a;需求现有以需求就是把某一个帖子的全部评论展示出来。二&#xff1a;分析关于对帖子的评论分为主评论和子评论&#xff0c;主评论就是对帖子的直接评论&#xff0c;子评论就是对评论的评论。三&#xff1a;思路先获取某一个帖子的全部主评论&#xff0c;递归判断…

mysql in 保持顺序_IN条件结果顺序问题_MySQL

bitsCN.comIN条件结果顺序问题项目中需要记录用户的浏览历史&#xff0c;我的意见是前端直接存cookie里&#xff0c;可是前端说cookie内容太多&#xff0c;要求传递id&#xff0c;后端返回数据&#xff0c;结果就产生如下的问题。1.据前端说&#xff0c;url中的数组传递是无序的…

(部分转载,部分原创)java大数类(2)

NYOJ 773 开方数 http://acm.nyist.net/JudgeOnline/problem.php?pid773 1 import java.util.Scanner;2 3 public class Main{4 public static void main(String[] args){5 int n;6 double p;7 Scanner cin new Scanner(System.in);8 w…

python3 logging com1_python-logging-基础(1)

在执行用例的时候&#xff0c;往往会遇到各种问题&#xff0c;遇到问题后很难去定位import loggingclass Logs:def __init__(self,filepath,name):#self.namename#self.filepathfilepathself.configRead_config(Config_Http)#重新定义日志名字self.loggerlogging.getLogger(sel…

python 复数求模_Python基础语法知识汇总(学习党的最爱!)

本文章包含了Python一系列基本知识&#xff0c;其中包括&#xff1a;基本数据类型&#xff08;整数&#xff0c;浮点数&#xff0c;复数&#xff0c;字符串&#xff09;&#xff1b;分支语句&#xff1b;异常处理&#xff1b;函数&#xff1b;局部变量与全局变量&#xff1b;递…

JAVA装mysql_已经安装了mysql,怎么能在java程序里使用SQL?

展开全部1、安装62616964757a686964616fe4b893e5b19e31333335323437SQLServer2000安装SQLServer2000补丁SP3安装SQLServer2000 for SP3的驱动程序(先打补丁sp3&#xff0c;再安装针对sp3的驱动程序&#xff0c;安装补丁时&#xff0c;为保险起见&#xff0c;两种验证方式的都装…

用对工具,抖音、某站视频轻松下载~

相信大部分小伙伴都有过这样的困扰&#xff0c;平时我们在刷短视频的时候就发现一段我们需要的视频。想下载时才发现&#xff0c;“保存”按钮是灰色的。 这个时候我们可以通过复制视频链接的方式来下载视频。下面给大家介绍四种万能视频下载工具&#xff0c;大家记得点赞收藏再…

flask 上传excel 前端_flask-restful编写上传图片api

Flask-RESTful是用于快速构建REST API的Flask扩展。我最近在使用Flask-Restful Vue.js写一个轻量博客时有一个前端后端上传图片的需求。在Flask-Restful的官方文档中并没有相关的内容。下面是我谷歌查找资料的总结。引入FileStorageflask-restful的参数解析中并没有文件类型&a…

qdir 类似工具_qdir 类似工具_支持 Win8.1,全能资源管理器 Q-Dir 5.74 发布

Q-Dir是一款帮助用户管理本地文件和文档的工具。支持快速访问定位本地磁盘、网络驱动器、USB移动设备及其他存储设备中的文件或文档。依靠强大的Quadro-View技术&#xff0c;使得Q-Dir成为一款优秀的文件管理工具。Q-Dir文件管理软件特色&#xff1a;• 收藏夹&#xff1a;快速…

面试题:求所占字符

/* 在32位系统下&#xff0c;分别定义如下两个变量&#xff1a;char *p[10],char(*p1)[10],sizeof(p),sizeof(p1)分别值为___________。 */ #include <stdio.h> #include <stdlib.h>void main() {char *p[10],(*p1)[10],p2[10],p3;printf("%d,%d,%d,%d,%d,%d&…

python pyquery安装_win7下python安装pyquery

安装pyquery之前首先要明确一点&#xff0c;easyinstall 是一款python包管理器&#xff0c;类似于node的npm&#xff0c;用于安装python的扩展包&#xff0c;它安装的包是以*.egg的方式。要安装pq需要经历以下步骤&#xff1a;1&#xff1a;下载easyinstall设置环境变量&#x…

织梦直接往数据库写入数据

x: 不是必须的 1: 值为1 0: 值为0转载于:https://www.cnblogs.com/bushe/p/4425298.html

wshttpbinding java_WCF自定义用户账号密码之WCF系结模式wsHttpBinding的Java调用

再回到编辑Web服务属性设定画面﹐刚刚所点击的[使用开发默认值]的复选框如果已经有被勾选了﹐请将勾选取消。然后先离开编辑Web服务属性设定画面。1.7. 加入CallbackHandler 档案这里需要加入一个继承CallbackHandler的档案TrustStoreCallbackHandler.javapublic class TrustSt…

android指纹java_Android

Android M指纹的资料太少&#xff0c;经过一段时间阅读原生Android代码&#xff0c;写了以下例子&#xff0c;贡献出来给需要帮助的人。以下内容基于64位的高通CPU&#xff0c;搭载fpc1020芯片&#xff0c;此部分代码在原生android上做了更改&#xff0c;以应付工厂指纹的测试。…

about-ie下模拟input file上传功能失效

Q&#xff1a;IE9下file提交到iframe中&#xff0c;load一直不触发&#xff0c;其他高级浏览器均无此问题 解决方案&#xff1a;不使用js模拟 input click事件&#xff0c;取而代之的是把真实的input设置为要触发元素的大小&#xff0c;进行触发onchange原因分析&#xff1a;低…

java把收集的数据节点_java面试题收集(04)

1、rebbitmq的使用场景有哪些&#xff1f;(1)单发送单接受使用场景&#xff1a;简单的发送与接受&#xff0c;没有特别的处理。(2)单发送多接受使用场景&#xff1a;一个发送端&#xff0c;多个接收端&#xff0c;如分布式的任务发布&#xff0c;要保证消息发送的可靠性&#x…

go java gc_图解Golang的GC垃圾回收算法

虽然Golang的GC自打一开始&#xff0c;就被人所诟病&#xff0c;但是经过这么多年的发展&#xff0c;Golang的GC已经改善了非常多&#xff0c;变得非常优秀了。以下是Golang GC算法的里程碑&#xff1a;v1.1 STWv1.3 Mark STW, Sweep 并行v1.5 三色标记法v1.8 hybrid write bar…