<!-- 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. POI导出Excel 错误THE MAXIMUM COLUMN WIDTH FOR AN INDIVIDUAL CELL IS 255 CHARACTERS

    int orgColWidth = (arrColWidth[column.Ordinal] + 1); if (liekuan > 255) liekuan = 255; //设置列宽 she ...

  2. C# string 保留数字英文字母

    using System; using System.Collections.Generic; using System.Linq; using System.Text.RegularExpressi ...

  3. Mark Text - 下一代所见即所得的Markdown编辑器

    Mark Text 所输及所见,摒弃了众多 markdown 编辑器左边写作右边预览的写作方式,巧妙的将编辑和预览融为一体.snabbdom 作为 Mark Text 的渲染引擎,保证了极速渲染编辑页 ...

  4. PHP实现权限管理功能

    权限管理系统,它主要是为了给不同的用户设定不同的权限,从而实现不同权限的用户登录之后使用的功能不一样. 首先先看下数据库 总共有5张表,users,roles和roleswork 3张表与另外2张表形 ...

  5. DNN网络(二)反向传播算法

    本文摘自: https://www.cnblogs.com/pinard/p/6422831.html http://www.cnblogs.com/charlotte77/p/5629865.htm ...

  6. pycharm中创建包时加入的_init_.py文件及_all_的作用

    init__.py的主要作用是: 1. Python中package的标识,不能删除 2. 定义__all__用来模糊导入 3. 编写Python代码(不建议在__init__中写python模块,可 ...

  7. linux(Cnetos7)安装jdk和tomcatmysql,tomcat

    mysqllinux版本的地址 安装包下载 下载地址:http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.13-1.el6.x86_64.rp ...

  8. Docker 扩容 容器空间大小 - 九

    Docker 扩容: 提前规划 : 一是从宿主机 配置磁盘格式 LVM 宿主机可以动态扩展: 二是 在容器上的扩容:默认是 100G .然后创建容器时候 挂载目录 或者直接池扩展: 默认 Docker ...

  9. JS/javaScript 获取div内容

    jquery: 例如<div id="abc"><a>内容</a></div>$("#abc").html(); ...

  10. [C++]数组处理相关函数(memcpy/memset等)

    头文件:string.h或者memory.h [1]void *memcpy(void *dest, const void *src, size_t n);//数组元素拷贝 功能:从源src所指的内存 ...