<div id="toolbar">
<div class="form-inline" role="form">
<div class="form-group">
<select class="form-control">
<option value="InterfNo" selected>经销商编号</option>
<option value="JoyoId">卓越卡号</option>
<option value="NickName">微信昵称</option>
<option value="Email">邮箱</option>
<option value="UserId">用户编号</option>
</select>
</div>
<div class="form-group">
<input name="search" class="form-control" type="text" placeholder="请输入查询关键字">
</div>
<div class="form-group" style="margin-left:20px;">
绑定日期:
<div class="input-group input-daterange">
<input type="text" id="sDate" name="sDate" readonly class="form-control" placeholder="开始日期">
<span class="input-group-addon">至</span>
<input type="text" id="eDate" name="eDate" readonly class="form-control" placeholder="结束日期">
</div>
</div>
<button id="ok" type="button" class="btn btn-default">搜索</button>
</div>
</div> <table id="table" data-toolbar="#toolbar" data-detail-view="true" data-page-list="[10, 20, 50, 100]" data-detail-formatter="detailFormatter">
<thead>
<tr>
<th data-field="UserId" data-width="150">用户编号</th>
<th data-field="NickName" data-width="220">昵称</th>
<th data-field="InterfNo" data-width="150">经销商编号</th>
<th data-field="JoyoId" data-width="60">卓越卡号</th>
<th data-field="Email" data-width="180">邮箱</th>
<th data-field="CreationTime" data-width="160">绑定时间</th>
<th data-formatter="operateFormatter" data-events="operateEvents">操作</th>
</tr>
</thead>
</table>

var $table = $('#table');
var btnSearch = $('#ok');

btnSearch.click(function () {
$table.bootstrapTable('selectPage', 1);
});
$table.bootstrapTable({
method: 'get',
url: url,
striped: true,
dataType: "json",
idField: "UserId",
pagination: true,
queryParamsType: "limit",
singleSelect: false,
contentType: "application/json;charset=utf-8",
pageSize: 10,
pageNumber: 1,
search: false, //不显示 搜索框
showColumns: false, //不显示下拉框(选择显示的列)
sidePagination: "server", //服务端请求
queryParams: queryParams,
responseHandler: responseHandler,
formatLoadingMessage: function () {
return "请稍等,正在加载中...";
},
onLoadError: function (data) {
$table.bootstrapTable('removeAll');
}
});
        //自定义传递到服务器的参数
function queryParams(params) {
$('#toolbar').find('input[name]').each(function () {
params[$(this).attr('name')] = $(this).val();
});
params["pageSize"] = params.limit;
var pageindex = params.offset / params.limit + 1;
//if (btnSearch.data("search") == "1") {
// pageindex = 1;
// btnSearch.data("search", 0);
// params.pageNumber = 0;
//}
params["pageIndex"] = pageindex;
params["Key"] = $("#toolbar select option:selected").val();
params["value"] = params.search; return params;
}
      //操作列按钮执行的方法
window.operateEvents = {
'click .wxUnBind': function (e, value, row) {
var d = { UserId: row.UserId, UnionId: row.UnionId };
var url = '@Url.Action("WxUnBind")';
unBind(url, d, $(e.target).text());
},
'click .interfNoUnBind': function (e, value, row) {
if (row.InterfNo.length == 0) {
swal("该用户未绑定经销商编号,无需解绑!", "", "error");
} else {
var d = { UserId: row.UserId, interfNo: row.InterfNo };
var url = '@Url.Action("InterfNoUnBind")';
unBind(url, d, $(e.target).text());
}
}
}; //格式化操作列中需要设置的按钮
function operateFormatter(value, row, index) {
var html = [];
html.push('<div>');
html.push('<a class="wxUnBind" href="javascript:void(0)" title="微信解绑">');
html.push('微信解绑');
html.push('</a>'); if (row.InterfNo.length > 0)
html.push('<a style="margin-left:10px" class="interfNoUnBind" href="javascript:void(0)" title="经销商解关联">经销商解关联</a>'); html.push('</div>'); return html.join('');
}

Bootstrap-table custome-ajax用法的更多相关文章

  1. bootstrap table通过ajax获取后台数据展示在table

    1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...

  2. Bootstrap table的基础用法

    一.官方文档 Bootstrap 中文网:http://www.bootcss.com/ Bootstrap Table 中文网 : http://bootstrap-table.wenzhixin. ...

  3. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  4. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  5. 新的表格展示利器 Bootstrap Table

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  6. 新的表格展示利器 Bootstrap Table Ⅰ

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...

  7. Bootstrap Table 的用法

    记录下 Bootstrap Table 的用法,备忘. <!DOCTYPE html> <html> <head> <meta charset="u ...

  8. bootstrap table 服务器端分页--ashx+ajax

    1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...

  9. bootstrap table教程--使用入门基本用法

    笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...

  10. 表格组件神器:bootstrap table详细使用指南

    1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...

随机推荐

  1. HDU 3001 Travelling (状压DP,3进制)

    题意: 给出n<=10个点,有m条边的无向图.问:可以从任意点出发,至多经过同一个点2次,遍历所有点的最小费用? 思路: 本题就是要卡你的内存,由于至多可经过同一个点2次,所以只能用3进制来表示 ...

  2. IM云通信行业步入快车道,谁将成为代表中国的全球IM“独角兽”?

    2016年,Twilio的成功上市,以及抢眼的股价表现,拓宽了全球云通信行业的想象空间,行业内公司估值水平也集体上调. 在中国,IM云通信行业也从2016年开始进入了一个“黄金发展时期”,一批如融云. ...

  3. UVA 11987 Almost Union-Find (单点修改的并查集)

    此题最难处理的操作就是将一个单点改变集合,而普通的并查集是不支持这种操作的. 当结点p是叶子结点的时候,直接pa[p] = root(q)是可以的, p没有子结点,这个操作对其它结点不会造成任何影响, ...

  4. Adobe登陆出现Access denied解决方法

    当我安装好Adobe Acrobat Reader DC时,想要登陆Adobe账号时被Access denied. 一般说需要梯子,然而本人亲测这种方法不行(香港主机,全局模式下). 一个简单有效的方 ...

  5. 项目中遇到的bug

    1. babel编译转换时发生了报错: BabelLoaderError: SyntaxError: Unexpected token babel预置的转换器是 babel-preset-es2015 ...

  6. CPP-网络/通信:gsoap 的教程和使用

    1.1.1     gSOAP 1.1.1 .1      简介 gSOAP 编译工具提供了一个 SOAP/XML 关于 C/C++ 语言的实现,从而让 C/C++ 语言研发 web 服务或客户端程式 ...

  7. 题解 P5051 【[COCI2017-2018#7] Timovi】

    看到这道题目,数据范围,心凉了一大截 这是没开O2的 而这是开了O2的 emm……本蒟蒻也无言以对呀 好了,回归正题,看到题目的标签,高性能,自然而然地想到了快读 相信做这题的大佬们一定知道吧! 快读 ...

  8. sqlite 新建实体时出错

    解决方式 手动下载 问题原因

  9. vector 下标操作

    比如:vector<int> ivec(3).. 当采用下标操作ivec[10]的时候,该操作是未定义的,在自己的机器上输出的值是零.建议使用迭代器进行操作.

  10. java基础——反射机制

    反射机制是什么 反射机制就是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称为jav ...