<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('');

        }