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开始 ...
随机推荐
- CRM项目之RBAC权限组件-day26
写在前面 上课第26天,打卡: 世间安得双全法 不负如来不负卿 s17day26 CRM项目 项目概要:XX公司CRM - 权限管理,公共组件,app ***** - 熟悉增删改查,Low *** - ...
- 记一次ElasticSearch重启之后shard未分配问题的解决
记一次ElasticSearch重启之后shard未分配问题的解决 环境 ElasticSearch6.3.2,三节点集群 Ubuntu16.04 一个名为user的索引,索引配置为:3 primar ...
- 'DataVisualization' does not exist in the namespace 'System.Web.UI'一例解决办法
之前项目是vs2010 aspx项目,用vs2017打开后,非运行状态下有一行错误:CS0234 C# The type or namespace name 'DataVisualization' d ...
- CSS3 transform-origin 属性
<!DOCTYPE html> <html> <head> <style> #div1 { position: relative; height: 20 ...
- Tippy.js – 轻量的 Javascript Tooltip 工具库
工具提示(Tooltip)在网站中的一个小功能,但却有很重要的作用,常用于显示一些温馨的提示信息.如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象.Tippy.js 是一款帮助你快速创 ...
- 【SRM-05 B】无题?
Description 有一个拥有n个城市的国家.这个国家由n-1条边连接起来.有一天国家发生叛乱.叛军已占领了一些城市.如果叛军占领的城市中,存在两个城市之间有边直接相连,则称这种情况是坏的.现在并 ...
- ubuntu 中文变成小方框 口
今天打开ubuntu所有原来是中文的地方都变成口口口口 ,下面是解决办法,其实很简单,更新一下字体库就可以了 1. 进入到字体的目录下 /usr/share/fonts/ ,输入下面的命令 c ...
- flex中使用white-space
在微信小程序开发中,view设置为flex布局,但是flex的flex-wrap属性不起作用,如果起作用的话,默认值即no-wrap不换行.如果要测试view-scroll并且scroll-x 就没法 ...
- 在vscode上 运行typescript 文件
安装nodejs 安装链接: https://nodejs.org/zh-cn/ 安装测试: node -v npm -v 安装typescript sudo npm install typescri ...
- 【css】正确的让文本换行
通常文本换行我们会使用word-break属性,有两个值供我们选择 word-break: break-all; word-break: break-world; 那么如何区分这两个值呢,我们看图说话 ...