bootstrap DataTable绑定数据带服务器分页
<!-- DataTables --> 这两个文件在我的文件夹里面
<script src="~/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="~/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> <table id="BZWH_table" class="table table-bordered table-hover">
<thead>
<tr class="first_trbg">
<th>标准类别</th>
<th>产品名称</th>
<th>标准代号</th>
<th>备注</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
<tfoot> </tfoot>
</table>
function getbzwhlist(pageIndex, pageSize) {
var pc = ;
$('#BZWH_table').DataTable({
"ajax": function (data, callback, settings) {
var sname = $("#bzwh_txtname").val();
var category_id = parseInt($("#bzgl_seltype").val());
if (category_id == -) {
category_id = ;
}
pageIndex = (data.start / pageSize) + ;
var params = { //这是自定义参数
pageIndex: pageIndex,
pageSize: pageSize,
OrderField: "id asc",
category_id: category_id,
sname: sname
};
var url = "/api/stand/GetList"; //接口地址
ajaxPost(url, params, function (rs) {
var fData = {
draw :,
recordsTotal: ,
recordsFiltered: ,
data: []
};
if (!rs.status) {
layer.msg("请求出错,请稍后重试" + rs.errmsg, { icon: , time: });
callback(fData);
return;
}
if (rs.data == null) {
$('#BZWH_table tbody tr').remove();
$('#loading').remove();
callback(fData);
return;
}
$('#loading').remove();
var gearDatas = [];
for (var i = ; i < rs.data.length; i++) {
var datwwa = new TData(rs.data[i].cname, rs.data[i].sname, rs.data[i].code, rs.data[i].remark, rs.data[i].id, rs.data[i].category_id)
gearDatas.push(datwwa);
}
pc = rs.total;
fData.data = gearDatas;
fData.recordsTotal = pc;
fData.recordsFiltered = pc;
callback(fData);
});
},
"serverSide": true,
"pagingType": "full_numbers",
"pageLength": pageSize,
"processing": true,
"destroy": true,
'columns': [{
data: 'cname'
}, {
data: 'sname'
}, {
data: 'code'
}, {
data: 'remark'
},
{
data: 'operate',
width: '140px'
}],
'paging': true,
'lengthChange': false,
'searching': false,
'ordering': false,
'autoWidth': false,
"language": {
"url": "/Scripts/language/chinese.json" //Table国际化 在网上很短直接下载用
},
});
}
// 数据对象
function TData(cname, sname, code, remark, id, category_id) {
this.id = id;
this.category_id = category_id;
this.cname = cname;
this.sname = sname;
this.code = code;
this.remark = remark;
this.operate = function () {
return "<a href='@Url.Action("Add","Text")?id=" + this.id + "&category_id=" + this.category_id + "' class='btn_editcolor'>编辑</a> <a onclick='BZWHDel($(this))' class='btn_delcolor' tag=" + this.id + ">删除</a>";
}
}
效果图:

稍做修改,可以封装成一个方法:
function createTable(id, colums, tCallback) {
$("#" + id).DataTable({
"ajax": function (data, callback, settings) {
tCallback(data, callback, settings);
},
"serverSide": true,
"pagingType": "full_numbers",
"pageLength": ,
"processing": true,
"destroy": true,
'columns': colums,
'paging': true,
'lengthChange': false,
'searching': false,
'ordering': false,
'autoWidth': false,
"language": {
"url": "/Scripts/language/chinese.json" //Table国际化
}
});
};
调用就更简单了:
function getbzwhlist(pageIndex, pageSize) {
var colums = [{
data: 'cname'
}, {
data: 'sname'
}, {
data: 'code'
}, {
data: 'remark'
}, {
data: 'operate',
width: '80px'
}];
createTable("flwh_table", colums, function (data, callback, settings) {
var pc = ;
var name = $("#flwhTypename").val();
pageIndex = (data.start / pageSize) + ;
var params = {
pageIndex: pageIndex,
pageSize: pageSize,
OrderField: 'id asc',
tc_name: name
}
var url = "/api/test/GetList";
ajaxPost(url, params, function (data) { //ajaxPost() 也是封装ajax请求的公用方法
var fData = {
draw: ,
recordsTotal: ,
recordsFiltered: ,
data: []
};
if (!data.status) {
layer.msg("请求出错,请稍后重试" + data.errmsg, { icon: , time: });
callback(fData);
return;
}
if (data.data == null) {
callback(fData);
return;
}
var gearDatas = [];
for (var i = ; i < data.data.length; i++) {
var datwwa = new FLData(data.data[i].tc_name, data.data[i].remark, data.data[i].id);
gearDatas.push(datwwa);
}
pc = data.total;
fData.data = gearDatas;
fData.recordsTotal = pc;
fData.recordsFiltered = pc;
callback(fData);
});
})}
bootstrap DataTable绑定数据带服务器分页的更多相关文章
- DataGridView插入一行数据和用DataTable绑定数据2种方式
以前不会用DataGridView的时候一直使用DataTable绑定的方式,如下: DataTable table = new DataTable(); //给表添加一列Name,此名字和 tabl ...
- ASP.NET DataList绑定数据并实现分页
显示当前页码Label属性 值ID NowPageNumberLabtext 1 ×××××××××××××××××××××显示总页码Label属性 值ID BackPageNumberLabt ...
- 利用表格分页显示数据的js组件bootstrap datatable的使用
前面展示了datatable的简单使用,还可以通过bootstrap结合datatable来使用,这样可以进一步美化datatable插件 <!DOCTYPE html> <html ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- datatable绑定comboBox显示数据[C#]
实现功能: datatable绑定comboBox,在下拉菜单中显示对应数据 实现方法: 1.生成datatable,并为combox绑定数据源: comboBox1.DataSource = dt1 ...
- datatable绑定comboBox,在下拉菜单中显示对应数据
实现功能: datatable绑定comboBox,在下拉菜单中显示对应数据 实现方法: .生成datatable,并为combox绑定数据源: comboBox1.DataSource = dt1; ...
- GridView动态添加列并判断绑定数据DataTable的列类型控制展示内容
此篇随笔是2013年根据项目需求开发记录的,不一定符合大众口味,只需了解开发思路,毕竟解决方案多种多样. 下面简单说说需求点吧: (1)通过下拉列表可以选择一个DataSet(数据集),一个DataS ...
- bootstrap datatable 数据刷新问题
在项目中,页面初始化的时候,通过通过向后台请求数据,页面初始化完之后,datatable是有数据的,当我点击页面的搜索按钮(按照时间过滤数据),datatable的数据要能重新刷新或者重载:这一点,我 ...
- 使用ASP.NET+Jquery DataTables的服务器分页
(1)先建立表,看看表结构 (2)建立存储过程 DataTables是服务器分页,GetWxUsers存储过程使用了4个参数 (1) @start--表示当前第几页,例如第3页,start是从0开始 ...
随机推荐
- 关于CPU的User、Nice、System、Wait、Idle各个参数的解释
使用Ganglia监控整个Hadoop集群,看到Ganglia采集的各种指标:CPU各个具体的指标含义解释如下: ①CPU(监测到的master主机上的CPU使用情况) 从图中看出,一共有五个关于CP ...
- 【十四】jvm 性能调优实例
实例1: POI Excel 导出 Excel对象很大,多人同时登录系统导出Excel的话,就会有多个大Excel对象到老年代,这是老年代需要回收,系统可能会卡顿. jvm堆内存设置的越大,Full ...
- luogu P3338 [ZJOI2014]力
传送门 首先化简原式\[F_j=\sum_{i<j}\frac{q_iq_j}{(i-j)^2}-\sum_{i>j}\frac{q_iq_j}{(i-j)^2},E_j=F_j/q_j\ ...
- CSS面试复习(一):HTML强化
1. HTML常见元素和理解 head类 meta:字符集.base:路径. a[href,target] img[src,alt] table td[colspan,rowspan] form[ta ...
- 关于ajax及相关数据传输问题
之前整理的ajax相关应用笔记,一直没有时间整理,今天突然翻到特此将初稿大概的整理了一下,可能有点乱,欢迎指出不足之处. jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会 ...
- CSS3里的瀑布流效果
页面伸缩之后,内部的布局会自动缩放,高度不同的内容也会自动以垂直瀑布的效果平铺. 下面就是一部分代码: CSS: /*大层*/ .container{width:%;margin: auto;} /* ...
- burp导入证书后仍然抓不到https包
burp导入证书后仍然抓不到https包 如果你是导入证书有问题,请参考此博客 http://blog.csdn.net/zyw_anquan/article/details/47904495 有一点 ...
- Django实战(一)-----用户登录与注册系统1(环境搭建)
一.背景 学了一段时间的语法,总感觉入不了门,所以找点小项目练练手,项目来自网络. 二.创建虚拟环境,并安装Django 使用Python中的virtualenv搭建一个mysite_env全新的环境 ...
- Windows防火墙配置(允许某个网段和部分IP访问某个端口)
1.win+R 2.gpedit.msc 3.计算机配置+Windows设置+安全设置+IP安全策略,在本地计算机 4.创建IP安全策略 5.配置IP筛选器列表.筛选器操作 6.分配 192.168. ...
- Fragment和FragmentActivity的使用方法
认识:首先我们知道Fragment是我们在单个Activity上要切换多个UI界面,显示不同内容.模块化这些UI面板以便提供给其他Acitivity使用便利.同时我们显示的Fragment也会受到当前 ...