<!-- 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>&nbsp;<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绑定数据带服务器分页的更多相关文章

  1. DataGridView插入一行数据和用DataTable绑定数据2种方式

    以前不会用DataGridView的时候一直使用DataTable绑定的方式,如下: DataTable table = new DataTable(); //给表添加一列Name,此名字和 tabl ...

  2. ASP.NET DataList绑定数据并实现分页

    显示当前页码Label属性 值ID NowPageNumberLabtext    1 ×××××××××××××××××××××显示总页码Label属性 值ID BackPageNumberLabt ...

  3. 利用表格分页显示数据的js组件bootstrap datatable的使用

    前面展示了datatable的简单使用,还可以通过bootstrap结合datatable来使用,这样可以进一步美化datatable插件 <!DOCTYPE html> <html ...

  4. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  5. datatable绑定comboBox显示数据[C#]

    实现功能: datatable绑定comboBox,在下拉菜单中显示对应数据 实现方法: 1.生成datatable,并为combox绑定数据源: comboBox1.DataSource = dt1 ...

  6. datatable绑定comboBox,在下拉菜单中显示对应数据

    实现功能: datatable绑定comboBox,在下拉菜单中显示对应数据 实现方法: .生成datatable,并为combox绑定数据源: comboBox1.DataSource = dt1; ...

  7. GridView动态添加列并判断绑定数据DataTable的列类型控制展示内容

    此篇随笔是2013年根据项目需求开发记录的,不一定符合大众口味,只需了解开发思路,毕竟解决方案多种多样. 下面简单说说需求点吧: (1)通过下拉列表可以选择一个DataSet(数据集),一个DataS ...

  8. bootstrap datatable 数据刷新问题

    在项目中,页面初始化的时候,通过通过向后台请求数据,页面初始化完之后,datatable是有数据的,当我点击页面的搜索按钮(按照时间过滤数据),datatable的数据要能重新刷新或者重载:这一点,我 ...

  9. 使用ASP.NET+Jquery DataTables的服务器分页

    (1)先建立表,看看表结构 (2)建立存储过程 DataTables是服务器分页,GetWxUsers存储过程使用了4个参数 (1) @start--表示当前第几页,例如第3页,start是从0开始 ...

随机推荐

  1. Kudu系列: Kudu主键选择策略

    每个Kudu 表必须设置Pimary Key(unique), 另外Kudu表不能设置secondary index, 经过实际性能测试, 本文给出了选择Kudu主键的几个策略, 测试结果纠正了我之前 ...

  2. impala系列: 时间函数

    --=======================时间函数--======================= --当前时间戳now()current_timestamp() --当前时间戳相对于 li ...

  3. C#中转换函数Convert、Parse、TryParse、(int) 的区别

    Convert.Parse.TryParse.(int) 三个函数都是将值转换成整数,但是四者之间各有异同,开发人员可以根据情况选用最合适的.以下解释均经过高人验证,希望对大家有所帮助. 1 (int ...

  4. NFine框架JqGrid导出选中行为Excel实现方法

    客户端 function PostAndGetFileByUrl(url,type,postdata) { var temp; $.ajax({ url: url, type: type, data: ...

  5. windows eclipse安装lombok插件

    1.下载lombok.jar,lombok.jar官方下载地址:https://projectlombok.org/download 2.双击下载好的lombak.jar,安装步骤如下: 2-1.关闭 ...

  6. 使用 JS 实现文字左右跑马灯

    Ø  前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1.   首先定义 ...

  7. DUMP1 企业级电商项目

    系统:centos6 配置mirror阿里云 https://opsx.alibaba.com/mirror 远程管理首选:ssh 账户密码登录(ssh user@host) 或者 本地私钥连接服务器 ...

  8. ubuntu16.04安装nvidia驱动及CUDA+cudnn

    网上查了资料,装好了,参照以下 https://blog.csdn.net/zhang970187013/article/details/81012845 https://blog.csdn.net/ ...

  9. Kaldi的nnet2 Component

    FixedAffineComponent:类 LDA-like 的非相关转换,由标准的 weight matrix plus bias 组成(即Wx+b),通过标准的 stochastic gradi ...

  10. git 无法拉取新的远程分支

    我们常常会根据远程分支创建本地分支,命令如下 git checkout -b dev origin/dev 上面的命令我是想把远程分支 dev 拉到本地来,但是有时候没有用,提示远程分支不存在,我们需 ...