文档章节

Jquery DataTable服务端分页的最佳实现

闰土的好友猹
 闰土的好友猹
发布于 2016/10/13 17:23
字数 2752
阅读 588
收藏 1

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Datatable-serverSide 自行封装请求参数和返回数据例子</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="asset/lib/bootstrap-2.3.2/css/bootstrap.min.css" media="screen">
    <link rel="stylesheet" href="asset/lib/bootstrap-2.3.2/css/bootstrap-responsive.min.css" media="screen">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="asset/lib/font-awesome-4.2.0/css/font-awesome.min.css">
    <!-- DataTables CSS start-->
    <link rel="stylesheet" href="asset/lib/dataTables-1.10.7/plugins/integration/bootstrap/2/dataTables.bootstrap.css">
    <link rel="stylesheet"
          href="asset/lib/dataTables-1.10.7/plugins/integration/font-awesome/dataTables.fontAwesome.css">
    <!-- DataTables CSS end-->

    <link rel="stylesheet" href="asset/css/user-manage.css">
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12" id="content">
            <div class="row-fluid">
                <div class="navbar" id="breadcrumb">
                    <div class="navbar-inner">
                        <ul class="breadcrumb">
                            <li>
                                <a href="#">首页</a>
                                <span class="divider">/</span>
                            </li>
                            <li class="active">用户管理</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <div class="btn-toolbar">
                        <div class="pull-right">
                            <div class="input-append">
                                <input type="text" placeholder="模糊查询" id="fuzzy-search">
                                <div class="btn-group">
                                    <button type="button" class="btn" id="btn-simple-search"><i
                                            class="fa fa-search"></i></button>
                                    <button type="button" class="btn" title="高级查询" id="toggle-advanced-search">
                                        <i class="fa fa-angle-double-down"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary" id="btn-add"><i class="fa fa-plus"></i> 添加
                        </button>
                        <button type="button" class="btn btn-danger" id="btn-del"><i class="fa fa-remove"></i> 批量删除
                        </button>
                    </div>
                </div>
            </div>
            <div class="row-fluid" style="display:none;" id="div-advanced-search">
                <form class="form-inline well">
                    <span>姓名:</span>
                    <input type="text" class="input-medium" placeholder="姓名" id="name-search">
                    <span>职位:</span>
                    <input type="text" class="input-medium" placeholder="职位" id="position-search">
                    <span>工作地点:</span>
                    <input type="text" class="input-medium" placeholder="工作地点" id="office-search">
                    <span>编号:</span>
                    <input type="text" class="input-medium" placeholder="编号" id="extn-search">
                    <span>在线状态:</span>
                    <select class="input-small" id="status-search">
                        <option value="">全部</option>
                        <option value="1">在线</option>
                        <option value="0">离线</option>
                    </select>
                    <select class="input-small" id="role-search">
                        <option value="">全部</option>
                        <option value="1">管理员</option>
                        <option value="0">操作员</option>
                    </select>
                    <button type="button" class="btn" id="btn-advanced-search"><i class="fa fa-search"></i> 查询</button>
                </form>
            </div>
            <div class="block info-block" id="user-view">
                <div class="navbar navbar-inner block-header">
                    <div class="block-title">用户详情</div>
                    <div class="header-buttons">
                        <button type="button" class="btn btn-primary" id="btn-view-edit">修改</button>
                    </div>
                </div>
                <div class="block-content info-content clearfix">
                    <div class="row-fluid">
                        <div class="span4">
                            <label class="prop-name">编号:</label>
                            <div class="prop-value" id="extn-view"></div>
                        </div>
                        <div class="span4">
                            <label class="prop-name">姓名:</label>
                            <div class="prop-value" id="name-view"></div>
                        </div>
                        <div class="span4">
                            <label class="prop-name">角色:</label>
                            <div class="prop-value" id="role-view"></div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4">
                            <label class="prop-name">职位:</label>
                            <div class="prop-value" id="position-view"></div>
                        </div>
                        <div class="span4">
                            <label class="prop-name">薪水:</label>
                            <div class="prop-value" id="salary-view"></div>
                        </div>
                        <div class="span4">
                            <label class="prop-name">状态:</label>
                            <div class="prop-value" id="status-view"></div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4">
                            <label class="prop-name">入职时间:</label>
                            <div class="prop-value" id="start-date-view"></div>
                        </div>
                        <div class="span8">
                            <label class="prop-name">办公地点:</label>
                            <div class="prop-value" id="office-view"></div>
                        </div>
                    </div>
                    <div class="row-fluid">
                        <div class="span12">
                            <label class="prop-name">备注:</label>
                            <div class="prop-value"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="block info-block" id="user-add" style="display:none;">
                <div class="navbar navbar-inner block-header">
                    <div class="block-title">添加账户</div>
                    <div class="header-buttons">
                        <button type="button" class="btn btn-primary" id="btn-save-add">确定添加</button>
                        <button type="button" class="btn btn-cancel">取消</button>
                    </div>
                </div>
                <div class="block-content info-content clearfix">
                    <form id="form-add">
                        <div class="control-group">
                            <label class="control-label" for="extn-add"><span
                                    class="red-asterisk">*</span>编号:</label>
                            <div class="controls">
                                <input type="text" id="extn-add" name="extn-add">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="name-add"><span
                                    class="red-asterisk">*</span>姓名:</label>
                            <div class="controls">
                                <input type="text" id="name-add" name="name-add">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="role-add">角色:</label>
                            <div class="controls">
                                <select id="role-add" name="role-add">
                                    <option value="1" selected>管理员</option>
                                    <option value="0">操作员</option>
                                </select>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="position-add">职位:</label>
                            <div class="controls">
                                <input type="text" id="position-add" name="position-add">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="salary-add">薪水:</label>
                            <div class="controls">
                                <input type="text" id="salary-add" name="salary-add">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="start-date-add">入职时间:</label>
                            <div class="controls">
                                <input type="text" id="start-date-add" name="start-date-add">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="office-add">办公地点:</label>
                            <div class="controls">
                                <input type="text" class="xlarge" id="office-add" name="office-add">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="remark-add">备注:</label>
                            <div class="controls">
                                <input type="text" class="xxxlarge" id="remark-add" name="remark-add">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="block info-block" id="user-edit" style="display:none;">
                <div class="navbar navbar-inner block-header">
                    <div class="block-title">修改账户:<span id="title-edit"></span></div>
                    <div class="header-buttons">
                        <button type="button" class="btn btn-primary" id="btn-save-edit">保存更改</button>
                        <button type="button" class="btn btn-cancel">取消</button>
                    </div>
                </div>
                <div class="block-content info-content clearfix">
                    <form id="form-edit">
                        <div class="control-group">
                            <label class="control-label" for="extn-edit"><span
                                    class="red-asterisk">*</span>编号:</label>
                            <div class="controls">
                                <input type="text" id="extn-edit" name="extn-edit">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="name-edit"><span
                                    class="red-asterisk">*</span>姓名:</label>
                            <div class="controls">
                                <input type="text" id="name-edit" name="name-edit">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="role-edit">角色:</label>
                            <div class="controls">
                                <select id="role-edit" name="role-edit">
                                    <option value="1" selected>管理员</option>
                                    <option value="0">操作员</option>
                                </select>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="position-edit">职位:</label>
                            <div class="controls">
                                <input type="text" id="position-edit" name="position-edit">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="salary-edit">薪水:</label>
                            <div class="controls">
                                <input type="text" id="salary-edit" name="salary-edit">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="start-date-edit">入职时间:</label>
                            <div class="controls">
                                <input type="text" id="start-date-edit" name="start-date-edit">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="office-edit">办公地点:</label>
                            <div class="controls">
                                <input type="text" class="xlarge" id="office-edit" name="office-edit">
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="remark-edit">备注:</label>
                            <div class="controls">
                                <input type="text" class="xxxlarge" id="remark-edit" name="remark-edit">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12" id="div-table-container">
                    <table class="table table-striped table-bordered table-hover table-condensed" id="table-user"
                           cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>
                                <input type="checkbox" name="cb-check-all">
                            </th>
                            <th>姓名</th>
                            <th>职位</th>
                            <th>状态</th>
                            <th>入职时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                        <tfoot>
                        <tr>
                            <th>
                                <input type="checkbox" name="cb-check-all">
                            </th>
                            <th>姓名</th>
                            <th>职位</th>
                            <th>状态</th>
                            <th>入职时间</th>
                            <th>操作</th>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="asset/lib/json2.js"></script>
<!-- JQuery -->
<script src="asset/lib/jquery-1.11.3.min.js"></script>
<!-- Bootstrap -->
<script src="asset/lib/bootstrap-2.3.2/js/bootstrap.min.js"></script>
<!-- SpinJS-->
<script src="asset/lib/spin-2.1.0/jquery.spin.merge.js"></script>
<!-- lhgdialog -->
<script src="asset/lib/lhgdialog-4.2.0/lhgdialog.js?skin=bootstrap2"></script>
<!-- DataTables JS-->
<script src="asset/lib/dataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<script src="asset/lib/dataTables-1.10.7/plugins/integration/bootstrap/2/dataTables.bootstrap.js"></script>
<!-- DataTables JS end-->
<script src="asset/js/constant.js"></script>
<script src="asset/js/user-manage.js"></script>
</body>
</html>

constant.js

/*常量*/
var CONSTANT = {
    DATA_TABLES: {
        DEFAULT_OPTION: { //DataTables初始化选项
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "每页 _MENU_ 项",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。",
                "sInfoEmpty": "当前显示第 0 至 0 项,共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页",
                    "sJump": "跳转"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            autoWidth: false,	//禁用自动调整列宽
            stripeClasses: ["odd", "even"],//为奇偶行加上样式,兼容不支持CSS伪类的场合
            order: [],			//取消默认排序查询,否则复选框一列会出现小箭头
            processing: false,	//隐藏加载提示,自行处理
            serverSide: true,	//启用服务器端分页
            searching: false	//禁用原生搜索
        },
        COLUMN: {
            CHECKBOX: {	//复选框单元格
                className: "td-checkbox",
                orderable: false,
                width: "30px",
                data: null,
                render: function (data, type, row, meta) {
                    return '<input type="checkbox" class="iCheck">';
                }
            }
        },
        RENDER: {	//常用render可以抽取出来,如日期时间、头像等
            ELLIPSIS: function (data, type, row, meta) {
                data = data || "";
                return '<span title="' + data + '">' + data + '</span>';
            }
        }
    }
};

userManage.js

$(function () {
    var $wrapper = $('#div-table-container');
    var $table = $('#table-user');

    var _table = $table.dataTable($.extend(true, {}, CONSTANT.DATA_TABLES.DEFAULT_OPTION, {
        ajax: function (data, callback, settings) {//ajax配置为function,手动调用异步查询
            //手动控制遮罩
            $wrapper.spinModal();
            //封装请求参数
            var param = userManage.getQueryCondition(data);
            $.ajax({
                type: "GET",
                url: "datasource.php",
                cache: false,	//禁用缓存
                data: param,	//传入已封装的参数
                dataType: "json",
                success: function (result) {
                    //setTimeout仅为测试遮罩效果
                    setTimeout(function () {
                        //异常判断与处理
                        if (result.errorCode) {
                            $.dialog.alert("查询失败。错误码:" + result.errorCode);
                            return;
                        }

                        //封装返回数据,这里仅演示了修改属性名
                        var returnData = {};
                        returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                        returnData.recordsTotal = result.total;
                        returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果
                        returnData.data = result.pageData;
                        //关闭遮罩
                        $wrapper.spinModal(false);
                        //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
                        //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
                        callback(returnData);
                    }, 200);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $.dialog.alert("查询失败");
                    $wrapper.spinModal(false);
                }
            });
        },
        columns: [
            CONSTANT.DATA_TABLES.COLUMN.CHECKBOX,
            {
                className: "ellipsis",	//文字过长时用省略号显示,CSS实现
                data: "name",
                render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,//会显示省略号的列,需要用title属性实现划过时显示全部文本的效果
            },
            {
                className: "ellipsis",
                data: "position",
                render: CONSTANT.DATA_TABLES.RENDER.ELLIPSIS,
                //固定列宽,但至少留下一个活动列不要固定宽度,让表格自行调整。不要将所有列都指定列宽,否则页面伸缩时所有列都会随之按比例伸缩。
                //切记设置table样式为table-layout:fixed; 否则列宽不会强制为指定宽度,也不会出现省略号。
                width: "80px"
            },
            {
                data: "status",
                width: "80px",
                render: function (data, type, row, meta) {
                    return '<i class="fa fa-male"></i> ' + (data ? "在线" : "离线");
                }
            },
            {
                data: "start_date",
                width: "80px"
            },
            {
                className: "td-operation",
                data: null,
                defaultContent: "",
                orderable: false,
                width: "120px"
            }
        ],
        "createdRow": function (row, data, index) {
            //行渲染回调,在这里可以对该行dom元素进行任何操作
            //给当前行加样式
            if (data.role) {
                $(row).addClass("info");
            }
            //给当前行某列加样式
            $('td', row).eq(3).addClass(data.status ? "text-success" : "text-error");
            //不使用render,改用jquery文档操作呈现单元格
            var $btnEdit = $('<button type="button" class="btn btn-small btn-primary btn-edit">修改</button>');
            var $btnDel = $('<button type="button" class="btn btn-small btn-danger btn-del">删除</button>');
            $('td', row).eq(5).append($btnEdit).append($btnDel);

        },
        "drawCallback": function (settings) {
            //渲染完毕后的回调
            //清空全选状态
            $(":checkbox[name='cb-check-all']", $wrapper).prop('checked', false);
            //默认选中第一行
            $("tbody tr", $table).eq(0).click();
        }
    })).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象

    $("#btn-add").click(function () {
        userManage.addItemInit();
    });

    $("#btn-del").click(function () {
        var arrItemId = [];
        $("tbody :checkbox:checked", $table).each(function (i) {
            var item = _table.row($(this).closest('tr')).data();
            arrItemId.push(item);
        });
        userManage.deleteItem(arrItemId);
    });

    $("#btn-simple-search").click(function () {
        userManage.fuzzySearch = true;

        //reload效果与draw(true)或者draw()类似,draw(false)则可在获取新数据的同时停留在当前页码,可自行试验
//		_table.ajax.reload();
//		_table.draw(false);
        _table.draw();
    });

    $("#btn-advanced-search").click(function () {
        userManage.fuzzySearch = false;
        _table.draw();
    });

    $("#btn-save-add").click(function () {
        userManage.addItemSubmit();
    });

    $("#btn-save-edit").click(function () {
        userManage.editItemSubmit();
    });

    //行点击事件
    $("tbody", $table).on("click", "tr", function (event) {
        $(this).addClass("active").siblings().removeClass("active");
        //获取该行对应的数据
        var item = _table.row($(this).closest('tr')).data();
        userManage.currentItem = item;
        userManage.showItemDetail(item);
    });

    $table.on("change", ":checkbox", function () {
        if ($(this).is("[name='cb-check-all']")) {
            //全选
            $(":checkbox", $table).prop("checked", $(this).prop("checked"));
        } else {
            //一般复选
            var checkbox = $("tbody :checkbox", $table);
            $(":checkbox[name='cb-check-all']", $table).prop('checked', checkbox.length == checkbox.filter(':checked').length);
        }
    }).on("click", ".td-checkbox", function (event) {
        //点击单元格即点击复选框
        !$(event.target).is(":checkbox") && $(":checkbox", this).trigger("click");
    }).on("click", ".btn-edit", function () {
        //点击编辑按钮
        var item = _table.row($(this).closest('tr')).data();
        $(this).closest('tr').addClass("active").siblings().removeClass("active");
        userManage.currentItem = item;
        userManage.editItemInit(item);
    }).on("click", ".btn-del", function () {
        //点击删除按钮
        var item = _table.row($(this).closest('tr')).data();
        $(this).closest('tr').addClass("active").siblings().removeClass("active");
        userManage.deleteItem([item]);
    });

    $("#toggle-advanced-search").click(function () {
        $("i", this).toggleClass("fa-angle-double-down fa-angle-double-up");
        $("#div-advanced-search").slideToggle("fast");
    });

    $("#btn-info-content-collapse").click(function () {
        $("i", this).toggleClass("fa-minus fa-plus");
        $("span", this).toggle();
        $("#user-view .info-content").slideToggle("fast");
    });

    $("#btn-view-edit").click(function () {
        userManage.editItemInit(userManage.currentItem);
    });

    $(".btn-cancel").click(function () {
        userManage.showItemDetail(userManage.currentItem);
    });
});

var userManage = {
    currentItem: null,
    fuzzySearch: true,
    getQueryCondition: function (data) {
        var param = {};
        //组装排序参数
        if (data.order && data.order.length && data.order[0]) {
            switch (data.order[0].column) {
                case 1:
                    param.orderColumn = "name";
                    break;
                case 2:
                    param.orderColumn = "position";
                    break;
                case 3:
                    param.orderColumn = "status";
                    break;
                case 4:
                    param.orderColumn = "start_date";
                    break;
                default:
                    param.orderColumn = "name";
                    break;
            }
            param.orderDir = data.order[0].dir;
        }
        //组装查询参数
        param.fuzzySearch = userManage.fuzzySearch;
        if (userManage.fuzzySearch) {
            param.fuzzy = $("#fuzzy-search").val();
        } else {
            param.name = $("#name-search").val();
            param.position = $("#position-search").val();
            param.office = $("#office-search").val();
            param.extn = $("#extn-search").val();
            param.status = $("#status-search").val();
            param.role = $("#role-search").val();
        }
        //组装分页参数
        param.startIndex = data.start;
        param.pageSize = data.length;

        param.draw = data.draw;

        return param;
    },
    showItemDetail: function (item) {
        $("#user-view").show().siblings(".info-block").hide();
        if (!item) {
            $("#user-view .prop-value").text("");
            return;
        }
        $("#name-view").text(item.name);
        $("#position-view").text(item.position);
        $("#salary-view").text(item.salary);
        $("#start-date-view").text(item.start_date);
        $("#office-view").text(item.office);
        $("#extn-view").text(item.extn);
        $("#role-view").text(item.role ? "管理员" : "操作员");
        $("#status-view").text(item.status ? "在线" : "离线");
    },
    addItemInit: function () {
        $("#form-add")[0].reset();

        $("#user-add").show().siblings(".info-block").hide();
    },
    editItemInit: function (item) {
        if (!item) {
            return;
        }
        $("#form-edit")[0].reset();
        $("#title-edit").text(item.name);
        $("#name-edit").val(item.name);
        $("#position-edit").val(item.position);
        $("#salary-edit").val(item.salary);
        $("#start-date-edit").val(item.start_date);
        $("#office-edit").val(item.office);
        $("#extn-edit").val(item.extn);
        $("#role-edit").val(item.role);
        $("#user-edit").show().siblings(".info-block").hide();
    },
    addItemSubmit: function () {
        $.dialog.tips('保存当前添加用户');
    },
    editItemSubmit: function () {
        $.dialog.tips('保存当前编辑用户');
    },
    deleteItem: function (selectedItems) {
        var message;
        if (selectedItems && selectedItems.length) {
            if (selectedItems.length == 1) {
                message = "确定要删除 '" + selectedItems[0].name + "' 吗?";

            } else {
                message = "确定要删除选中的" + selectedItems.length + "项记录吗?";
            }
            $.dialog.confirmDanger(message, function () {
                $.dialog.tips('执行删除操作');
            });
        } else {
            $.dialog.tips('请先选中要操作的行');
        }
    }
};

© 著作权归作者所有

闰土的好友猹
粉丝 6
博文 52
码字总数 39857
作品 0
杭州
后端工程师
私信 提问
13 个最佳 JavaScript 数据表格库

JavaScript 是一种通常被用在网页开发中的编程语言。它主要是在互联网上的网页浏览器中开发出效果出众且可交互的特效。它是客户端脚本语言中的一种,是被用来作为通过用户的网页浏览器进行处...

oschina
2017/03/10
5K
7
21 个最佳的 jQuery 翻页插件

jPages [ Demo || Download ] jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和滚动浏览,延迟显示以及完全可定制的导航面板。 Easy pagination with jQuery and Ajax [...

oschina
2013/05/14
10.7K
12
JSF框架 PrimeFaces 3.0 M2 发布

PrimeFaces是一个用于提高JSF Web应用程序开发效率的开源类库。 3.0M2 主要改进包括(完整内容): Reimplementation of component event callbacks (*Listener, *Update) as ajax behaviors...

红薯
2011/07/08
703
0
20 个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

红薯
2012/04/04
14.7K
6
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失

在Spring Cloud中我们用Hystrix来实现断路器,Zuul中默认是用信号量(Hystrix默认是线程)来进行隔离的,我们可以通过配置使用线程方式隔离。 在使用线程隔离的时候,有个问题是必须要解决的...

xiaomin0322
48分钟前
2
0
使用 Jenkins + Ansible 实现 Spring Boot 自动化部署101

本文首发于:Jenkins 中文社区 本文要点: 设计一条 Spring Boot 最基本的流水线:包括构建、制品上传、部署。 使用 Docker 容器运行构建逻辑。 自动化整个实验环境:包括 Jenkins 的配置,J...

Jenkins中文社区
52分钟前
4
0
springcloud配置中心和消息总线,学习,记录其中的问题

改造配置中心的客户端,接入消息总线 1.增加pom文件的引用 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20......

夜中孤影
今天
3
0
gzip压缩

tar -zcvf gz包路径 被压缩的路径 tar -zcvf /home/xxx/test.tar.gz hello gz包的路径可以是 完整的也可以相对 , 被压缩的路径 不要全路径 不然压缩包里也会有全路径...

shzwork
今天
3
0
rancher-1

部署rancher 官方快速部署 https://www.cnrancher.com/quick-start/ 部署命令 mkdir /data/rancher -p# 建立存放rancher数据的目录sudo docker run -d --restart=unless-stopped -v /dat......

以谁为师
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部