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，可以自定義插件~

    這樣，就可以配合其他分頁插件使用了~

    今天，就到這里~