jQuery Plugin, DataTable Pagination, 2012/06/30

    前提：弄了一年的Flex，对JS基本不懂，更别谈jQuery了，今天早上去公司没事，看了下jQuery的介绍，准备写一个可编辑的表格控件，而且可以结合其他分页控件，新手上路，无喷啊~

 

$(document).ready(function() {
    var dg = $("#dg").dataTable({
        "aoKey": ["SN", "CNTX"]
    });
    var dp = [{
        "SN": 1,
        "CNTX": "IE"
    },
    {
        "SN": 2,
        "CNTX": "FF"
    }];
    dg.fnSetSrc(dp);
});

(function($) {
    var dataTable = function(oInit) {
        var oDefs = {};
        var oInit = $.extend(oDefs, $.fn.dataTable, oInit);

        // 初始化需要显示的键值
        var oSets = {
            aoKey: oInit["aoKey"],
            aoSrc: oInit["aoSrc"] || [],
            oThis: this,
            oApis: oInit.oApis,
            oSelt: {
                iSelIdx: -1,
                oSelObj: {}
            }
        };

        // 校验是否存在tbody标记
        if ($(this).find("tbody").length == 0) {
            var tbody = $("<tbody></tbody>");
            tbody.appendTo($(this));
        }

        // 添加外部函数
        $.each(oSets.oApis,
        function(oApi, func) {
            oSets.oThis[oApi] = func;
            oSets.oThis[oApi].apply(func, [oSets]);
        });

        //--------------------------------------------------
        //-- 内部处理函数 ----------------------------------
        //--------------------------------------------------
        function _fnSelect() {
            with(oSets.oSelt) {
                iSelIdx = $(this).index();
                oSelObj = oSets.aoSrc[iSelIdx];
            }
        }

        //--------------------------------------------------
        //-- 外部接口函数 ----------------------------------
        //--------------------------------------------------
        this.fnSelect = function() {
            return oSets.oSelt;
        }

        /**
          * 设置数据源
          * @param aoSrc 数据源
          * */
        this.fnSetSrc = function(aoSrc) {
            oSets.aoSrc = aoSrc || [];
            this.fnUpdate();
        }

        /**
          * 生成表格
          * @param oOpts
          * */
        this.fnUpdate = function(oOpts) {
            var tbody = $(this).find("tbody");
            tbody.empty();

            $.each(oSets.aoSrc,
            function(i, src) {
                var tr = $("<tr></tr>");
                tr.bind("click", _fnSelect); // 添加事件绑定
                $.each(oSets.aoKey,
                function(j, cntx) {
                    var td = $("<td>" + src[cntx] + "</td>");
                    td.appendTo(tr);
                });
                tr.appendTo(tbody);
            });
        }

        return this;
    };
    dataTable.oApis = $.extend({},
    dataTable.oApis);

    $.fn.dataTable = dataTable;
})(jQuery);

　　

    谷歌了到了jQuery.dataTable，这个控件，确实强大，但是感觉不怎么合适使用，至少是我。

    设置数据源后，调用fnUpdate方法即可，增、删、改数据直接修改数组源并更新就可，后续增加单行操作的函数~

    参考jQuery.dataTable，可以自定义插件~

    这样，就可以配合其他分页插件使用了~

    今天，就到这里~