之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件，今天简单改造了一下，改成了原生JavaScript版本的分页插件，可以自定义一些简单配置，特此记录下来。如有不足之处，欢迎指出。

需要购买阿里云产品和服务的，点击此链接领取优惠券红包，优惠购买哦，领取后一个月内有效： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07

本插件可以自定义的功能：

　　1. 可初始化每页条数，以及重新选择每页条数

　　2.自定义首末页、上下页按钮的显示内容（是：<<、  >>、  < 、  >    还是：首页、末页、上一页、下一页）

　　3.设置当前页在一定范围时，是否显示省略号按钮

　　4.自定义当前页按钮与省略号按钮之间显示的数字按钮的个数

需要设置的参数如下：

　　pageSize: 10,           //每页条数（不设置时，默认为10）
　　prevPage: '上页',      //上一页按钮显示内容（不设置时，默认为：<）
　　nextPage: '下页',      //下一页按钮显示内容（不设置时，默认为：>）
　　firstPage: '首页',      //首页按钮显示内容（不设置时，默认为：<<）
　　lastPage: '末页',       //末页按钮显示内容（不设置时，默认为：>>）
　　degeCount: 4,         //当前页前后两边可显示的页码个数（不设置时，默认为3）
　　ellipsis: true            //是否显示省略号按钮(不可点击)（true:显示，false:不显示，不设置时，默认为显示）

这些设置项只需要在页面加载时定义一个js对象，设置相应的参数，在创建Paging实例时，传入该对象即可。当然也可以不定义该参数对象，则在创建Paging实例时，需传入空对象，此时就是默认设置。

由于本案例用ajax调用的接口是真实接口，返回的都是真实数据，所以在本博客的代码中，我会把调用的接口地址和相关的请求头信息隐藏。

自己实现的简单小插件，把分页部分的css样式写在了插件paging.js中，以动态创建style标签的方式，加入到页面中。

1、代码部分：

1.1、插件 - paging.js

分页的css样式写在插件中，动态创建style标签，加载到页面中。在该js中有一个Paging构造函数。在构造函数中有两个参数，第一个是自定义分页参数的js对象，第二个是回调函数。

在构造函数中有一个initPage()方法。用来渲染分页DOM结构。页码点击事件和选择每页条数的事件都写在构造函数中，目前这样感觉确实不好，后续再改进。

代码如下：

  1. var tableStyle =
  2.     ".page {font-size: 14px;background-color: transparent;width: 100%;height: 50px;line-height: 50px;display: none;}"+
  3.     ".page .page-l select {width: 60px;height: 30px;}"+
  4.     ".page .page-l .page-size-box {display: inline-block;margin-left: 20px;}"+
  5.     ".page .page-r {float: right;padding-top: 10px;}"+
  6.     ".page .page-r ul {float: left;list-style: none;margin: 0;height: 30px;box-sizing: border-box;padding: 0;}"+
  7.     ".page .page-r ul li {float: left;list-style: none;height: 100%;line-height: 30px;border: 1px solid #ccc;border-right: 0 none;box-sizing: border-box;}"+
  8.     ".page .page-r ul li a:hover {background-color: #f5f2f2;}"+
  9.     ".page .page-r ul li:last-child {border-right: 1px solid #ccc;}"+
  10.     ".page .page-r ul li a {text-decoration: none;display: block;height: 100%;padding:0 10px; color: #777;}"+
  11.     ".page .page-r ul li a.active {background-color: #09aeb0;color: #fff;}"+
  12.     ".page .page-r ul li span {display: block;height: 100%;padding:0 10px;color: #ccc;cursor: not-allowed;}"+
  13.     ".page .page-r ul li span.ellipsis {cursor: default;}";
  14.  
  15. var styleNode = document.createElement('style');
  16. styleNode.innerHTML = tableStyle;
  17. var headNode = document.getElementsByTagName('head')[0];
  18. headNode.appendChild(styleNode);
  19.  
  20. function Paging(paramsObj, callback) {
  21.     this.pageSize = paramsObj.pageSize || 10;    //每页条数（不设置时，默认为10
  22.     this.pageIndex = paramsObj.pageIndex || 1;    //当前页码
  23.     this.totalCount = paramsObj.totalCount || 0;   //总记录数
  24.     this.totalPage = Math.ceil(paramsObj.totalCount / paramsObj.pageSize) || 0;     //总页数
  25.     this.prevPage = paramsObj.prevPage || '<';     //上一页（不设置时，默认为：<）
  26.     this.nextPage = paramsObj.nextPage || '>';     //下一页（不设置时，默认为：>）
  27.     this.firstPage = paramsObj.firstPage || '<<';     //首页（不设置时，默认为：<<）
  28.     this.lastPage = paramsObj.lastPage || '>>';     //末页（不设置时，默认为：>>）
  29.     this.degeCount = paramsObj.degeCount || 3;             //当前页前后两边可显示的页码个数（不设置时，默认为3）
  30.     this.ellipsis = paramsObj.ellipsis; //是否显示省略号不可点击按钮（true：显示，false：不显示）
  31.     this.ellipsisBtn = (paramsObj.ellipsis == true || paramsObj.ellipsis == null) ? '<li><span class="ellipsis">…</span></li>' : '';
  32.     var that = this;
  33.  
  34.     $('#page_size').val(this.pageSize);
  35.     callback && callback(this.pageIndex, this.pageSize);    //立即执行回调函数
  36.  
  37.     // 生成分页DOM结构
  38.     this.initPage = function (totalCount, totalPage, pageIndex) {
  39.         this.totalCount = totalCount;
  40.         this.totalPage = totalPage;
  41.         this.pageIndex = pageIndex;
  42.         var degeCount = this.degeCount;
  43.         var pageHtml = '';  //总的DOM结构
  44.         var tmpHtmlPrev = '';   //省略号按钮前面的DOM
  45.         var tmpHtmlNext = '';   //省略号按钮后面的DOM
  46.         var headHtml = ''; //首页和上一页按钮的DOM
  47.         var endHtml = '';   //末页和下一页按钮的DOM
  48.         if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex >= degeCount+1){   //前后都需要省略号按钮
  49.             headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
  50.                 '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
  51.  
  52.             endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
  53.                 '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
  54.  
  55.             var count = degeCount;  //前后各自需要显示的页码个数
  56.             for(var i=0; i<count; i++){
  57.                 if(pageIndex != 1){
  58.                     tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
  59.                 }
  60.                 tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
  61.             }
  62.             pageHtml = headHtml +
  63.                 this.ellipsisBtn +
  64.                 tmpHtmlPrev +
  65.                 '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
  66.                 tmpHtmlNext +
  67.                 this.ellipsisBtn +
  68.                 endHtml;
  69.         }else if(pageIndex - degeCount >= degeCount-1 && totalPage - pageIndex < degeCount+1) { //前面需要省略号按钮，后面不需要
  70.             headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
  71.                 '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
  72.  
  73.             if(pageIndex == totalPage){ //如果当前页就是最后一页
  74.                 endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
  75.                     '<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
  76.             }else{  //当前页不是最后一页
  77.                 endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
  78.                     '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
  79.             }
  80.  
  81.             var count = degeCount;  //前需要显示的页码个数
  82.             var countNext = totalPage - pageIndex;  //后需要显示的页码个数
  83.             if(pageIndex != 1){
  84.                 for(var i=0; i<count; i++){
  85.                     tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(count-i))+'</a></li>';
  86.                 }
  87.             }
  88.             for(var i=0; i<countNext; i++){
  89.                 tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
  90.             }
  91.             pageHtml = headHtml +
  92.                 this.ellipsisBtn +
  93.                 tmpHtmlPrev +
  94.                 '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
  95.                 tmpHtmlNext +
  96.                 endHtml;
  97.         }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex >= degeCount+1){ //前面不需要，后面需要省略号按钮
  98.             if(pageIndex == 1){ //如果当前页就是第一页
  99.                 headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
  100.                     '<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
  101.             }else{  //当前页不是第一页
  102.                 headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
  103.                     '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
  104.             }
  105.  
  106.             endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
  107.                 '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
  108.  
  109.             var countPrev = pageIndex - 1;  //前需要显示的页码个数
  110.             var count = degeCount;  //后需要显示的页码个数
  111.             if(pageIndex != 1){
  112.                 for(var i=0; i<countPrev; i++){
  113.                     tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
  114.                 }
  115.             }
  116.             for(var i=0; i<count; i++){
  117.                 tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
  118.             }
  119.             pageHtml = headHtml +
  120.                 tmpHtmlPrev +
  121.                 '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
  122.                 tmpHtmlNext +
  123.                 this.ellipsisBtn +
  124.                 endHtml;
  125.         }else if(pageIndex - degeCount < degeCount-1 && totalPage - pageIndex < degeCount+1){   //前后都不需要省略号按钮
  126.             headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
  127.                 '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
  128.             endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
  129.                 '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
  130.  
  131.             if(totalPage == 1){ //如果总页数就为1
  132.                 headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
  133.                     '<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
  134.                 endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
  135.                     '<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
  136.             }else{
  137.                 if(pageIndex == 1){ //如果当前页就是第一页
  138.                     headHtml = '<li><span id="first_page" href="javascript:;">'+this.firstPage+'</span></li>'+
  139.                         '<li><span id="prev_page" href="javascript:;">'+this.prevPage+'</span></li>';
  140.                     endHtml = '<li><a id="next_page" href="javascript:;">'+this.nextPage+'</a></li>'+
  141.                         '<li><a id="last_page" href="javascript:;">'+this.lastPage+'</a></li>';
  142.                 }else if(pageIndex == totalPage){  //如果当前页是最后一页
  143.                     headHtml = '<li><a id="first_page" href="javascript:;">'+this.firstPage+'</a></li>'+
  144.                         '<li><a id="prev_page" href="javascript:;">'+this.prevPage+'</a></li>';
  145.                     endHtml = '<li><span id="next_page" href="javascript:;">'+this.nextPage+'</span></li>'+
  146.                         '<li><span id="last_page" href="javascript:;">'+this.lastPage+'</span></li>';
  147.                 }
  148.             }
  149.  
  150.             var countPrev = pageIndex - 1;  //前需要显示的页码个数
  151.             var countNext = totalPage - pageIndex;  //后需要显示的页码个数
  152.             if(pageIndex != 1){
  153.                 for(var i=0; i<countPrev; i++){
  154.                     tmpHtmlPrev += '<li><a href="javascript:;" class="page-number">'+(pageIndex-(countPrev-i))+'</a></li>';
  155.                 }
  156.             }
  157.             for(var i=0; i<countNext; i++){
  158.                 tmpHtmlNext += '<li><a href="javascript:;" class="page-number">'+((pageIndex-0)+i+1)+'</a></li>';
  159.             }
  160.             pageHtml = headHtml +
  161.                 tmpHtmlPrev +
  162.                 '<li><a href="javascript:;" class="active">'+pageIndex+'</a></li>'+
  163.                 tmpHtmlNext +
  164.                 endHtml;
  165.         }
  166.         $('#page_ul').html(pageHtml);
  167.         $('#total_count').html(totalCount);
  168.     };
  169.  
  170.     // 点击页码（首页、上一页、下一页、末页、数字页）
  171.     $('#page_ul').on('click','a',function (e) {
  172.         var _this = $(this);
  173.         var idAttr = _this.attr('id');
  174.         var className = _this.attr('class');
  175.         if(idAttr == 'first_page'){ //如果是点击的首页
  176.             that.pageIndex = 1;
  177.         }else if(idAttr == 'prev_page'){    //如果点击的是上一页
  178.             that.pageIndex = that.pageIndex == 1 ? that.pageIndex : that.pageIndex - 1 ;
  179.         }else if(idAttr == 'next_page'){ //如果点击的是下一页
  180.             that.pageIndex = that.pageIndex == that.totalPage ? that.pageIndex : parseInt(that.pageIndex) + 1;
  181.         }else if(idAttr == 'last_page'){ //如果点击的是末页
  182.             that.pageIndex = that.totalPage;
  183.         }else if(className == 'page-number'){   //如果点击的是数字页码
  184.             that.pageIndex = _this.html();
  185.         }
  186.         callback && callback(that.pageIndex, that.pageSize);
  187.     });
  188.  
  189.     // 改变每页条数
  190.     $('#page_size').change(function () {
  191.         var _this = $(this);
  192.         that.pageIndex = paramsObj.pageIndex = 1;
  193.         that.pageSize = paramsObj.pageSize = _this.val() - 0;
  194.         callback && callback(that.pageIndex, that.pageSize);
  195.     })
  196. }

1.2、index.html

只需要在创建Paging实例的时候，传入设置项的js对象，然后在回调函数里发送ajax请求获取数据。回调函数里需要传入两个形参，依次是当前页码和每页条数。ajax请求的成功回调里根据接口返回的总条数，结合每页条数计算出总页数。再调用Paging实例的initPage()方法，传入总条数、总页数和当前页码，即可渲染出分页的DOM结构了。

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js版分页插件</title>
  6.     <style>
  7.         .data {
  8.             width: 70%;
  9.             margin: 0 auto;
  10.         }
  11.         .params {
  12.             margin: 20px 0;
  13.         }
  14.         .params input {
  15.             height: 30px;
  16.             box-sizing: border-box;
  17.         }
  18.         .params .search-btn {
  19.             float: right;
  20.             width: 80px;
  21.             border: 0 none;
  22.             background-color: #666;
  23.             color: #fff;
  24.             font-size: 14px;
  25.         }
  26.         table {
  27.             width: 100%;
  28.             border-collapse: collapse;
  29.             text-align: center;
  30.         }
  31.         th, td {
  32.             border: 1px solid #999;
  33.             height: 26px;
  34.             line-height: 26px;
  35.         }
  36.         .no-data {
  37.             display: none;
  38.             height: 80px;
  39.             line-height: 80px;
  40.             text-align: center;
  41.             color: #aaa;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="data">
  47.         <div class="params">
  48.             <label for="course_id">用户姓名：</label><input type="text" id="user_name">
  49.             <input type="button" value="查询" class="search-btn" id="search_btn">
  50.         </div>
  51.         <table>
  52.             <thead>
  53.                 <tr>
  54.                     <th>序号</th>
  55.                     <th>用户ID</th>
  56.                     <th>姓名</th>
  57.                     <th>创建时间</th>
  58.                 </tr>
  59.             </thead>
  60.             <tbody id="data_list"></tbody>
  61.         </table>
  62.         <div class="no-data">未查询到数据</div>
  63.  
  64.         <!-- 分页结构 -->
  65.         <div class="page">
  66.             <div class="page-l" id="page_l" style="float: left;">
  67.                 <span>总共 <span id="total_count"></span> 条</span>
  68.                 <div class="page-size-box">
  69.                     <span>每页显示</span>
  70.                     <select id="page_size">
  71.                         <option value="10">10</option>
  72.                         <option value="20">20</option>
  73.                         <option value="50">50</option>
  74.                         <option value="100">100</option>
  75.                     </select>条
  76.                 </div>
  77.             </div>
  78.             <div class="page-r">
  79.                 <ul id="page_ul" class="page-ul"></ul>
  80.             </div>
  81.         </div>
  82.     </div>
  83.  
  84.     <script src="../lib/jquery.js"></script>
  85.     <script src="paging-bak.js"></script>
  86.     <script>
  87.         $(function () {
  88.  
  89.             //分页参数（参数名固定不可变）
  90.             var pageConfig = {
  91.                 pageSize: 10,                //每页条数（不设置时，默认为10）
  92.                 prevPage: '上页',             //上一页（不设置时，默认为：<）
  93.                 nextPage: '下页',             //下一页（不设置时，默认为：>）
  94.                 firstPage: '首页',            //首页（不设置时，默认为：<<）
  95.                 lastPage: '末页',             //末页（不设置时，默认为：>>）
  96.                 degeCount: 4,                //当前页前后两边可显示的页码个数（不设置时，默认为3）
  97.                 ellipsis: true               //是否显示省略号按钮(不可点击)（true:显示，false:不显示，不设置时，默认为显示）
  98.             }
  99.             getList();  //初始加载就查询
  100.  
  101.             //点击查询按钮
  102.             $('#search_btn').click(function () {
  103.                 getList();
  104.             })
  105.  
  106.             //查询列表数据
  107.             function getList() {
  108.                 //初始化Paging实例(pageConfig参数也可以为空对象，此时就是默认设置)
  109.                 var pageIng = new Paging(pageConfig, function (pageIndex, pageSize) {
  110.                     var userName = $('#user_name').val();
  111.                     $.ajax({
  112.                         url:'http://******/getSysUserList.do', //这里就不显示接口地址
  113.                         type:'get',
  114.                         data:{
  115.                             pageIndex: pageIndex,
  116.                             pageSize: pageSize,
  117.                             name: userName
  118.                         },
  119.                         success: function (res) {
  120.                             if(res.success == 1){
  121.                                 if(res.data.length > 0){  //如果查询到了数据
  122.                                     var dataList = res.data;
  123.                                     var html = '';
  124.                                     dataList.forEach(function (item, i) {
  125.                                         html += '<tr>'+
  126.                                                     '<td style="width: 20%;">'+((pageIndex-1)*pageSize+i+1)+'</td>'+
  127.                                                     '<td style="width: 20%;">'+item.id+'</td>'+
  128.                                                     '<td style="width: 30%;">'+item.name+'</td>'+
  129.                                                     '<td style="width: 30%;">'+item.createTime+'</td>'+
  130.                                                 '</tr>';
  131.                                     });
  132.                                     $('#data_list').html(html);
  133.                                     var totalCount = res.totalCount;   //接口返回的总条数
  134.                                     var totalPage = Math.ceil(totalCount / pageSize);   //根据总条数和每页条数计算总页码数
  135.  
  136.                                     // 调用Paging实例的 initPage()方法生成分页DOM结构
  137.                                     pageIng.initPage(totalCount, totalPage, pageIndex);
  138.                                     $('.page').show();
  139.                                     $('.no-data').hide();
  140.                                 }else{  //如果未查询到数据
  141.                                     $('#data_list').html('');
  142.                                     $('.page').hide();
  143.                                     $('.no-data').show();
  144.                                 }
  145.                             }else{
  146.                                 $('#data_list').html('');
  147.                                 $('.page').hide();
  148.                                 $('.no-data').show();
  149.                             }
  150.                         }
  151.                     })
  152.                 });
  153.             }
  154.         })
  155.     </script>
  156. </body>
  157. </html>

2、效果

当前显示第一页时，首页和上页按钮不可点击，鼠标移上去时，也会显示不可点击的状态

由于初始化的degeCount参数为4，ellipsis参数为true，所以当当前页在一定范围时，会出现省略号按钮，在当前页按钮的两边会显示4个可点击的按钮

如果当前页是最后一页，则末页和下页的按钮不可点击，鼠标移上去时，会显示不可点击的状态

当修改每页显示条数时，会自动重新查询数据，默认显示第一页

当查询结果的总页数为1的时候，则首页、上页、下页、末页四个按钮均不可点击

原生js版分页插件的更多相关文章

  1. 自实现jQuery版分页插件

    本篇博客的分页插件是在2017-11-10 的一篇博客的基础上改造的(原博客地址:原生js版分页插件),主要是优化了分页按钮的排列和显示样式,取消首页和末页的箭头按钮,改为数字按钮,并始终把它们分别固 ...

  2. 跨浏览器的placeholder – 原生JS版

    转自来源 : http://www.ifrans.cn/placehoder/ 跨浏览器的placeholder – 原生JS版 html5为input元素新增了一个属性”placeholder”,提 ...

  3. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  4. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  5. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  6. 原生JS版和jQuery 版实现文件上传功能

    <!doctype html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  7. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  8. 原生js实现autocomplete插件

    在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性.但是出于学习的目的,你可以利用闲暇时间, ...

  9. 原生 js 写分页

    欢迎留言或者加本人QQ172360937咨询 这段代码是用原生 js 写的一个分页的效果 <!doctype html> <html lang="en"> ...

随机推荐

  1. "虐待"过我的老师们，你们如今还好吗

    当皇城脚下的民生问题都这么难做的时候,其他地方又该如何保障呢? 京城“红黄蓝”出名了,京城发生锅炉大爆炸了,京城发生火灾了…… 聊天中,有一好友突然蹦出了一句话:“你看在皇城脚下都不安全了”. 久久我 ...

  2. 后台工作者HangFire与ABP框架Abp.Hangfire及扩展

    HangFire与Quartz.NET相比主要是HangFire的内置提供集成化的控制台,方便后台查看及监控,对于大家来说,比较方便. HangFire是什么 Hangfire是一个开源框架(.NET ...

  3. （译）学习JavaScript闭包

    原文地址:https://medium.freecodecamp.org/lets-learn-javascript-closures-66feb44f6a44   闭包是JavaScript中一个基 ...

  4. selenium实现自动下载文件

    #coding:utf-8'''说明:导出'''from selenium import webdriverfrom public.highlightElement import highlightf ...

  5. CORS（跨站资源共享）介绍

    起因 有同学在nginx站点配置中加了一行Access-Control-Allow-Origin *,导致微信中业务数据异常,抓包看http头有两个Access-Control-Allow-Origi ...

  6. Mybatis(一）实现单表的增删改查

    1.1 什么是Mybatis MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并 ...

  7. Web Mining and Big Data 公开课学习笔记 ---lecture0

    0.1  课程主要内容:Big data technologies , Machine Learning and AI 0.6   OUTLINE: predict the future using ...

  8. cinder存储节点 后端采用lvm、nfs安装配置

    #cinder存储节点 openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #cinder存储节点 #cinder后端采 ...

  9. JavaScript OOP（三）：prototype原型对象（即构造函数的prototype属性）

    通过构造函数生成的实例化对象,无法共享属性或方法(即每个实例化对象上都有构造函数中的属性和方法):造成了一定的资源浪费 function Obj(name,age){ this.name=name; ...

  10. 白话图解HTTPS原理

        [前言]最近看过几篇文章,内容是关于"全民HTTPS"的.为什么HTTPS,突然会受到如此多业内人士的青睐呢?HTTPS究竟是什么呢?它与HTTP又有怎样的区别呢? 带着这 ...