Jquery datatables插件实现表头固定内容可滚动列表_Jquery_ThinkSAAS
Jquery datatables插件实现表头固定内容可滚动列表
Jquery datatables插件实现表头固定内容可滚动列表
内容来源： 网络
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信datatables 配套bootstrap样式使用小结（2） ajax篇-爱编程
datatables 配套bootstrap样式使用小结（2） ajax篇
距离上一篇有点时间了，周末做了伴郎参加了一个土豪同学的婚礼。
上一篇是介绍一下基本的用法，基本的原理是取出所有的数据，然后调用$.datatables(option)方法格式化，这种方法显然不太科学，所以ajax方式是必须的。
首先上个效果图。
js和css引用方面依旧没有变化，详见上篇。
ViewBag.Title = "DataTableServer";
//两种身份
List&SelectListItem& discriminatorTypes = new List&SelectListItem&()
new SelectListItem(){Text="身份类型",Value = ""},
new SelectListItem(){Text = "学生",Value ="Student"},
new SelectListItem(){Text="导师",Value="Instructor"}
&div class="hidden" id="hidden_filter"&
@* 把需要搜索的条件放到hidden里面，在table格式化完成的时候直接调用$.html()赋值，免去了在js拼接标签的麻烦 *@
&div class="row" style="margin-right:0;"&
@Html.DropDownList("disType", discriminatorTypes, new { @class = "form-control input-small", style = "width:120px" })
@Html.TextBox("name", "", new { @class = "form-control input-small", style = "width:150px", placeholder = "请输入姓名" })
&button id="go_search" class="btn btn-default"&搜索&/button&
&div class="panel panel-default"&
&div class="panel-heading"&
&div class="panel-title"&
Ajax 异步获取数据
&div class="panel-body"&
&table id="table_server" class="table table-bordered table-striped table-hover"&
&th&ID&/th&
&th&姓名&/th&
&th&入职时间&/th&
&th&身份&/th&
&th&操作&/th&
页面定义上table里面只需要定义thead即可。
&script type="text/javascript"&
$(function () {
var tablePrefix = "#table_server_";
$("#table_server").dataTable({
serverSide: true,//分页，取数据等等的都放到服务端去
processing: true,//载入数据的时候是否显示&载入中&
pageLength: 10,//首次加载的数据条数
ordering: false,//排序操作在服务端进行，所以可以关了。
ajax: {//类似jquery的ajax参数，基本都可以用。
type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
url: "@Url.Action("GetPeoples")",
dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
data: function (d) {//d 是原始的发送给服务器的数据，默认很长。
var param = {};//因为服务端排序，可以新建一个参数对象
param.start = d.//开始的序号
param.length = d.//要取的数据的
var formData = $("#filter_form").serializeArray();//把form里面的数据序列化成数组
formData.forEach(function (e) {
param[e.name] = e.
return//自定义需要传递的参数。
columns: [//对应上面thead里面的序列
{ data: "id", },//字段名字和返回的json序列的key对应
{ data: "name", },
//Student 没有hireDate
data: function (e) {
if (e.hireDate) {//默认是/Date()/格式，需要显示成年月日方式
return new Date(Number(e.hireDate.replace(/\D/g, ''))).toLocaleDateString();
return "空";
{ data: "discriminator", },
data: function (e) {//这里给最后一列返回一个操作列表
//e是得到的json数组中的一个item ，可以用于控制标签的属性。
return '&a class="btn btn-default btn-xs show-detail-json"&&i class="icon-edit"&&/i&显示详细&/a&';
initComplete: function (setting, json) {
//初始化完成之后替换原先的搜索框。
//本来想把form标签放到hidden_filter 里面，因为事件绑定的缘故，还是拿出来。
$(tablePrefix + "filter").html("&form id='filter_form'&" + $("#hidden_filter").html() + "&/form&");
language: {
lengthMenu: '&select class="form-control input-xsmall"&' + '&option value="5"&5&/option&' + '&option value="10"&10&/option&' + '&option value="20"&20&/option&' + '&option value="30"&30&/option&' + '&option value="40"&40&/option&' + '&option value="50"&50&/option&' + '&/select&条记录',//左上角的分页大小显示。
processing: "载入中",//处理页面数据的时候的显示
paginate: {//分页的样式文本内容。
previous: "上一页",
next: "下一页",
first: "第一页",
last: "最后一页"
zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。
//下面三者构成了总体的左下角的内容。
info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。
infoEmpty: "0条记录",//筛选为空时左下角的显示。
infoFiltered: ""//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
//$("#table_server_filter input[type=search]").css({ width: "auto" });//右上角的默认搜索文本框，不写这个就超出去了。
$(document).on("submit", "#filter_form", function () {
return false;
$(document).on("click", "#go_search", function () {
$("#table_server").DataTable().draw();//点搜索重新绘制table。
$(document).on("click", ".show-detail-json", function () {//取出当前行的数据
alert(JSON.stringify($("#table_server").DataTable().row($(this).parents("tr")).data()));
上面主要包含两个点，一个是自定义右上角的filter对象，要在table初始化完成的回调函数里面加载方法；第二个是调用DataTable API对象的draw方法，实现重新加载。
最后想说的是标签的绑定事件要放到document或者其他父标签上，因为元素是在datatable方法加载完成之后才显示出来的。
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。jQuery Datatable 表格插件 - 大饼0806 - 博客园
随笔 - 92, 文章 - 0, 评论 - 1, 引用 - 0
Datatable 总体来说很好用，可以实现即时搜索和排序。但是只能用于数据量较少的情况下，如果数据量超过1K建议还是用表格加翻页，不然会很慢。
datatable 中文网 &
使用DataTables很简单，只需要引入两个文件， 一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上，可以使用下面这两个文件：
css &&cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
js &cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
提到 CDN，这里稍微提一句，百度的CDN&&以及Bootstrap 的cdn 都是不错的选择&
在引入这两个文件之后，怎样简单地使用DataTables？使用下方简单的几行代码，就可以初始化table。
$(document).ready(function(){
$('#data_table').DataTable(); });
其中#myTable 就是对应的 &table id，如下所示
&table id="data_table" cellpadding="0" cellspacing="0" border="0"
class="data_table table table-striped table-bordered table-hover"&&/table&如果你想设置你的翻页，每页显示10个，可以加上下面这一段
$(function () {var dataTableOption = {
pageLength: 10,
language: {
paginate: {
previous: "上一页",
next: "下一页"
"order": [[ 0, "desc" ]]
$("#data_table").DataTable(dataTableOption);})
好了，现在你已经实现Datatable 了！23:35 提问
jquery datatable 如何改变字体大小
各位好：目前在使用datatable 插件展示数据，但是发现默认的字体很大，没找到调整的地方
各位知道如何调整吗？
引入的脚本
&link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /&
&link rel="stylesheet" type="text/css" href="dataTables/css/dataTables.jqueryui.css" /&
&script src="js/jquery-2.2.3.min.js" type="text/javascript"&&/script&
&script type="text/javascript" charset="utf8" src="dataTables/js/jquery.dataTables.js"&&/script&
&script type="text/javascript" charset="utf8" src="dataTables/js/dataTables.jqueryui.js"&&/script&
效果图如下：
按赞数排序
----------------------同志你好，我是CSDN问答机器人小N，奉组织之命为你提供参考答案，编程尚未成功，同志仍需努力！
自己用浏览器开发工具审查下元素有什么样式，自己写一个覆盖就行了，不考虑ie6，直接用！important进行覆盖就行，下面这个会直接设置所有内容为12px大小，你指向控制table的内容，最好是审核下看下元素有什么样式自己写一个覆盖
&link rel="stylesheet" type="text/css" href="dataTables/css/dataTables.jqueryui.css" /&
&style&body,td{font-size:12px !important}&/style&jquery DataTables插件显示表格 - Sun - ITeye技术网站
博客分类：
jquery DataTables插件显示表格
该插件可对表格进行排序、查询、分页
并使用jEditable插件可对表格进行编辑，并返回到server端进行保存
官网：http://www.datatables.net/
附件1：从官网下载的文件
附件2：根据官网实例进行的修改
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&
&meta http-equiv="content-type" content="text/ charset=utf-8" /&
&link rel="shortcut icon" type="image/ico"
href="http://www.datatables.net/media/images/favicon.ico" /&
&title&DataTables example&/title&
&style type="text/css" title="currentStyle"&
@import "css/demo_page.css";
@import "css/demo_table_jui.css";
@import "css/jquery-ui-1.8.4.custom.css";
&script type="text/javascript" language="javascript"
src="js/jquery.js"&&/script&
&script type="text/javascript" language="javascript"
src="js/jquery.jeditable.js"&&/script&
&script type="text/javascript" language="javascript"
src="js/jquery.dataTables.js"&&/script&
&script type="text/javascript" charset="utf-8"&
function getDataSet() {
var aDataS
$.ajaxSetup( {
async : false//设置get、post同步
$.get("register/RegisterState", {
}, function(data, status) {
if (status == "success") {
data = eval("(" + data + ")");
aDataSet =
alert("wrong");
return aDataS
$(document).ready(function() {
oTable = $('#example').dataTable( {
"aaData" : getDataSet(),//从服务端获取数据添加到表格内容
"bJQueryUI" : true,//使用DataTables提供的Themes，界面比较美观
"sPaginationType" : "full_numbers"//分页
/* Apply the jEditable handlers to the table */
$('td', oTable.fnGetNodes()).editable('editable_ajax.php', {
indicator : 'Saving...',
tooltip : 'Click to edit...',
"callback" : function(sValue, y) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sValue, aPos[0], aPos[1]);
"submitdata" : function(value, settings) {
"row_id" : this.parentNode.getAttribute('id'),
"column" : oTable.fnGetPosition(this)[2]
"height" : "14px"
&body id="dt_example"&
&div id="container"&
&div class="demo_jui"&
&table cellpadding="0" cellspacing="0" border="0" class="display"
id="example"&
User Email
Register Way
Service Name
下载次数: 313
(116.9 KB)
下载次数: 459
楼主写得真详细。 请教下，把第一列不显示， 却要拿到第一列的值，怎么拿把第一列设置为不可见即可&tr&&td style="display:none"&test&/td&&/tr&
浏览: 271621 次
来自: 天津
[img][flash=200,200][url][img]引 ...
IE11不好用！！
$.ajaxSetup({async : false});这种 ...
[align=ceiinter][/align]