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开始 ...
随机推荐
- 细说shiro之七:缓存
官网:https://shiro.apache.org/ 一. 概述 Shiro作为一个开源的权限框架,其组件化的设计思想使得开发者可以根据具体业务场景灵活地实现权限管理方案,权限粒度的控制非常方便. ...
- Ubuntu swap
问:我是一个Ubuntu 14.04 LTS版本的新手.我需要一块额外的swap文件来提高我Ubuntu服务器的性能.我怎样才能通过SSH连接用相关命令为我的Ubuntu 14.04 LTS 增加一块 ...
- 添加Glide图片加载框架依赖
1.添加依赖implementation 'com.github.bumptech.glide:glide:4.7.1' 2.放置一个ImageView.3.加载,ivGif是ImageView实例 ...
- NFine框架JqGrid导出选中行为Excel实现方法
客户端 function PostAndGetFileByUrl(url,type,postdata) { var temp; $.ajax({ url: url, type: type, data: ...
- 持续集成CI相关的几个概念
持续集成 https://en.wikipedia.org/wiki/Continuous_integration 为什么要持续? 持续集成, 可以避免集成地狱(由于工作的源码 和 库中的源码的差异导 ...
- 在SQL注入中利用MySQL隐形的类型转换绕过WAF检测
web应用一般采用基于表单的身份验证方式(页面雏形如下图所示),处理逻辑就是将表单中提交的用户名和密码传递到后台数据库去查询,并根据查询结果判断是否通过身份验证.对于LAMP架构的web应用而言,处理 ...
- axis2客户端
package com.yq.test; /** * Created by yangqing on 2016/12/6. */ import java.util.Date; import java.u ...
- system("x")
system("pause");和system("cls")使用示例程序 #include "stdio.h" #include " ...
- 关于hashMap中 计算hashCode的逻辑推理(二)
hashMap中,为了使元素在数组中尽量均匀的分布,所以使用取模的算法来决定元素的位置.如下: //方法一: static final int hash(Object key){//jdk1.8 in ...
- python2 编码与解码
#!coding: utf-8 s = "特斯拉" s_to_unicode = s.decode("utf-8") unicode_to_gbk = s_to ...