04月18, 2017

dataTables简单使用

dataTables是一款jquery插件,据我同事的介绍,是jquery比较牛逼的一款插件。

因为dataTables的css这一块,和我们实际效果有出入,所以我就顺便兼职了写css。另外就是分页那一块的插件js编写。

实际效果图如下:

dataTables

dataTables有一个配置很牛逼,叫dom的option,可以通过它来DIY元素

{
    "dom": "rt<"bottom"ipl>"
}

不过吐嘈一点,它的css真的写的很low,我重置了好几个clear:both的css,欲哭无泪。

随后的难点就是重写右下角的分页DIV。官方有提供几个分页插件,但和我的需求都不符合。

简单来说,我的由三部分组件:页码(上一页、数字翻页、下一页),每页/条的下拉框,input跳到第几页。

每页/条的下拉框,在官方其实是有的,它的缩写为l(l - Length changing 每页显示多少条数据选项),但怎么放到自定义插件里面去。一开始想到的是自己重写,但想到似乎没有一个插件提供这样的API代码,于是放弃了。当时脑海里还闪过一个方法:appendChild,只要我能保证它开始的时候能出来,然后我把这个元素append到我指定的节点(不就相当于转移了么),再只要用bootstrap渲染一下就行了。(这里还有一个小坑是,怎么保证只渲染一次)。

$.fn.dataTableExt.oPagination.custom = {
    "fnInit": function (oSettings, nPaging, fnCallbackDraw) {

        oSettings.initOnce = true; // 判断是否是第一次

        // ...

    },

    "fnUpdate": function (oSettings) {

        if (!oSettings.aanFeatures.p) {
            return;
        }

        var an = oSettings.aanFeatures.p;

        // 保证初始化一次
        if( oSettings.initOnce ) {
            var  menu = oSettings.aanFeatures.l;
            $(an).find(".page-btn-area").append(menu);
            try {
                $(an).find("select").selectpicker({
                    container: "body",
                    width: 90
                });
            } catch (e) {
                console.error("需要引入bootstrap的selectpicker");
            }
            oSettings.initOnce = false;
        }

        // ...

    }
};

这个插件工作原理是,第一次会执行init、update,之后的改变都是update。由于l(每页多少条的下拉)只能在update里面生成,所以必须要有一个参数来保证只初始化一次。

页码这个,估计是被说烂了。不过我前年面试老东家的时候,被问及。。其实原理就是找到start和end,然后剩下就是"..."拼接一下。分享两篇文章吧:

页码的点击事件(包括),可以参考其他分页插件的写法。

同事在项目中还有用到了固定列,简单说两个固定列的坑:

  • hover颜色的处理(由于它是两个table叠加处理,所以当右边的移上去时,左边固定列并没有hover颜色,所以得用js处理)
  • 滚动条处理(似乎左侧高度有点问题,如果自定义滚动条的话,反正我这边得重新计算一下)

固定的元素,并没有drawCallback这个回调里面生成,所以我的手段是setTimeout,实在是无可奈何。。

源代码在这里

本文链接:www.my-fe.pub/post/use-dataTables-simple.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。