<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. pod install Pull is not possible because you have unmerged files.

    http://stackoverflow.com/questions/21474536/podfile-gives-an-error-on-install A bug was found in lib ...

  2. ABAP,Java和JavaScript的序列化,反序列化

    ABAP 1. ABAP提供了一个工具类cl_proxy_xml_transform,通过它的两个方法abap_to_xml_xstring和xml_xstring_to_abap实现两种格式的互换. ...

  3. inner join 和 left join 的区别

    1.left join.right join.inner join的区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表 ...

  4. libnet TCP示例

    [root@TD18 tmp]#gcc -o .c -lnet [root@TD18 tmp]#./ please enter Host address 11.11.11.11 please ente ...

  5. comboBox 下拉宽度自适应

    ///适用combobox绑定datatable private void comboBox_DataSourceChanged(object sender, EventArgs e) { Combo ...

  6. 使用js将div高度设置为100%

      在开发的工程中使用到了一些开源的bootstrap模板进行开发,在遇到一些需要替换的内容部分部分时,经常出现高度设置100%无法生效的问题,这里来用js强行设置一下.   思路:js监听窗口的缩放 ...

  7. 【SAM】loj#6401. 字符串

    网上有篇题解写的是线段树合并维护求值? 题目描述 有一个只包含小写字母,长度为 $n$ 的字符串 $S$ .有一些字母是好的,剩下的是坏的. 定义一个子串 $S_{l\ldots r}$是好的,当且仅 ...

  8. 【树形dp】bzoj4726: [POI2017]Sabota?

    找点概率期望的题做一做 Description 某个公司有n个人, 上下级关系构成了一个有根树.其中有个人是叛徒(这个人不知道是谁).对于一个人, 如果他 下属(直接或者间接, 不包括他自己)中叛徒占 ...

  9. Linux - 后台运行 ctrl + z , jobs , bg , fg

    一.& 最经常被用到 这个用在一个命令的最后,可以把这个命令放到后台执行 二.ctrl + z 可以将一个正在前台执行的命令放到后台,并且暂停三.jobs查看当前有多少在后台运行的命令四.fg ...

  10. 201621123080 《Java程序设计》第2周学习总结

    Week02-Java基本语法与类库 1. 本周学习总结 本周主要学习了java的数据类型.运算符,String类,java的简单输入输出与流程控制. 在做题上对String和数组的理解与区分仍不够深 ...