Bootstrap中动态创建的元素如何添加tooltip效果

问题：动态创建的元素如何添加tooltip效果

tooltip是一种常用的效果类提示工具，用于增强title属性的样式。不同的前段框架有自己不同的使用和展现方式，比如Bootstrap、JQueryUI、Popper等。本文主要依托Bootstrap讲解。

对于Bootstrap，只需要如下代码即可完成配置。

1
2
3
4
5
6
7
8
9
<!-- HTML中如下配置： -->
<!-- placement：top（default） right bottom left -->
<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<!-- title可以加html样式，如下： -->
<button type="button" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

1
2
// js中触发
$('button').tooltip();

这种显示的配置适用于页面初始化。如果一个元素是动态生成的，比如说datatable column中生成，这种方式将会失效。
more >>

阅读全文 >>

datatable 后端分页处理

问题：datatable 后端分页处理

对于datatable来说，即使对大数据量的处理，如果不涉及状态数据（比如有实时要求）且后端接口速度够快的话，其实不用做后端分页也可以。在option中使用“deferRender”: true，基本上能达到较快的渲染速度。

1
2
3
4
5
6
7
$(document).ready(function() {
   $('#example').DataTable( {
       "ajax": "data/arrays.txt",
       //当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
       "deferRender": true
   } );
});

但是，真的碰到了上述情况，那么后端分页就是必须的了。下面来看：
more >>

阅读全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

爱前端、爱小说、爱音乐、爱产品、爱游泳、爱动漫、爱家务、爱安静、爱萧萧。人生这么短，且行且努力。