1. <div id="toolbar">
  2. <div class="form-inline" role="form">
  3. <div class="form-group">
  4. <select class="form-control">
  5. <option value="InterfNo" selected>经销商编号</option>
  6. <option value="JoyoId">卓越卡号</option>
  7. <option value="NickName">微信昵称</option>
  8. <option value="Email">邮箱</option>
  9. <option value="UserId">用户编号</option>
  10. </select>
  11. </div>
  12. <div class="form-group">
  13. <input name="search" class="form-control" type="text" placeholder="请输入查询关键字">
  14. </div>
  15. <div class="form-group" style="margin-left:20px;">
  16. 绑定日期:
  17. <div class="input-group input-daterange">
  18. <input type="text" id="sDate" name="sDate" readonly class="form-control" placeholder="开始日期">
  19. <span class="input-group-addon"></span>
  20. <input type="text" id="eDate" name="eDate" readonly class="form-control" placeholder="结束日期">
  21. </div>
  22. </div>
  23. <button id="ok" type="button" class="btn btn-default">搜索</button>
  24. </div>
  25. </div>
  26.  
  27. <table id="table" data-toolbar="#toolbar" data-detail-view="true" data-page-list="[10, 20, 50, 100]" data-detail-formatter="detailFormatter">
  28. <thead>
  29. <tr>
  30. <th data-field="UserId" data-width="150">用户编号</th>
  31. <th data-field="NickName" data-width="220">昵称</th>
  32. <th data-field="InterfNo" data-width="150">经销商编号</th>
  33. <th data-field="JoyoId" data-width="60">卓越卡号</th>
  34. <th data-field="Email" data-width="180">邮箱</th>
  35. <th data-field="CreationTime" data-width="160">绑定时间</th>
  36. <th data-formatter="operateFormatter" data-events="operateEvents">操作</th>
  37. </tr>
  38. </thead>
  39. </table>

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

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

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. Python中Numpy mat的使用

    前面介绍过用dnarray来模拟,但mat更符合矩阵,这里的mat与Matlab中的很相似.(mat与matrix等同) 基本操作 >>> m= np.mat([1,2,3]) #创 ...

  2. python基础之基本数据类型

    1.int 整数 2.bool 布尔 3.str 字符串,一般放小量数据 4.list 列表,可以存放大量的数据 5.dict字典,以key:value的形式存储数据 6.set集合(数学) 7.tu ...

  3. exportfs: /mnt/demo requires fsid= for NFS export

    解决方法:/mnt/demo 10.0.1.57(fsid=0,rw,async) //加入fsid=0参数就可.

  4. 《毛毛虫组》【Alpha】Scrum meeting 1

    第一天 日期:2019/6/14 1.1 今日完成任务情况以及遇到的问题. 今日完成任务情况: (1)根据数据库设计时的E-R图将创建的表进行检查确保功能的正确实现. (2)进行公共类的设计,设计出程 ...

  5. HTML5<footer>元素

    HTML5中<footer>元素是用来描述文档中的底部信息,比如:版本,版权,作者,链接声明,联系信息,时间等等. 实例: <footer> <p>这是一个底部的信 ...

  6. Electron的介绍

    1.1 Electron是什么? 引用官网的一句话: Build cross platform desktop apps with JavaScript, HTML, and CSS 1.2 诞生 技 ...

  7. 删除sqlserver管理器登录信息缓存

    在Windows10下测试有效: C:\Users\<user>\AppData\Roaming\Microsoft\Microsoft SQL Server\100\Tools\Shel ...

  8. *运算和&运算

    /* &:取地址运算符 *:指针运算符(或称为间接运算符),取指针所指向的对象的内容 */ int a,b; int *pointer_1, *pointer_2; pointer_1 = & ...

  9. webpack开始一个项目的步骤

    这几天在学习Vue  用到了webpack打包工具  开始一个项目的时候  需要配置很多项  刚开始写的时候  配置文件总是缺什么再去配置什么  创建项目就用了半个小时  后来觉得应该有个步骤  这样 ...

  10. 【线性基合并 树链剖分】bzoj4568: [Scoi2016]幸运数字

    板子题 Description A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个 幸运数字,以纪念碑的形式矗立在这座城市的正中心,作为城市 ...