前端 表格： 整合方法

//需求：简单的将数据绑定在表格上，并作出简单的分页
//需要参数： 1 绑定的table元素 2 绑定的分页pagin元素(可以不需要) 3 数据 4 format 绑定列创建的格式
//需要的功能： 1 自动初始化表格和分页 2 提供操作的一列 指定特定的方法创建 3 提供方法去修改 绑定在table中的数据 做好 数据和表格的交互
使用样例：

html:
<table id="h-table" class="table table-bordered table-condensed table-hover">
    <thead>
        <tr>
            <th h-table-thead="zd1">字段1</th> 
            <th h-table-thead="zd2">字段2</th> 
            <th h-table-thead="other">操作</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<div id="h-pa">

</div>
js:
var ht = new htable($("#h-table"),$("#h-pa"),[
        { zd1 : "sdfs",zd2: "fsfs" },
        { zd1 : "sdfdsf",zd2:"fsfdsf"}
    ], {
    other: function (info, $tr) {
        var $delbtn = $("<a href='#' class='btn'>删除</a>");
        var $editbtn = $("<a href='#' class='btn'>编辑</a>");
        $tr.append($("<td></td>")
            .append($delbtn)
            .append($editbtn)
        )
        $delbtn.click(function () {
            ht.remove($tr);
        });
        $editbtn.click(function () {
           ht.update({ zd1: "编辑",zd2 : "自动" }, $tr);
        });
    }
});
var count = 1;
$("#add").click(function () {
	//添加在第一行
    ht.append({ zd1 : count,zd2:"zd"});
    count++;
});

源码：

function htable(tableElement,paginElement,data,format) {
    var options = {
        tableElement: null,
        paginElement: null,
        maxRow : "",
        data: [],
        showData: [],
        itemCount: 1,//每页10条
        pageCount: 0,//总页数
        curpage: 0,//当前页
        curgroup: 0,//当前页组
        groupCount: 0,//总页组数
        pageNum: 2,
        operation : null
    }

    //绑定数据
    options.data = $.extend(true,[],data);
    options.showData = $.extend(true,[],data);
    options.maxRow = options.showData.length;
    options.tableElement = tableElement;
    options.paginElement = paginElement;
    $.each(options.showData,function (i,v) {  //数据添加需要
        v["hindex"] = i;
    });
    var htheads = [];
    $.each(options.tableElement.find("thead th"), function (i, v) {
        htheads.push($(this).attr("h-table-thead"));
    });

    //插入表格的方法
    function addTab(info,$tr) {
        var $newTr ;
        if ($tr){
            $newTr = $tr.empty();
        }else{
            $newTr = $("<tr hindex='" + info.hindex + "'></tr>");
            options.tableElement.find("tbody").append($newTr);
        }

        //htheads 获取生成方法
        $.each(htheads, function (i, v) {
            if (info[v]) {
                $newTr.append($("<td name='" + v + "'>"+info[v]+"</td>"))
            } else if (format[v]) {
                format[v](info,$newTr);
            }
        });
    }

    //默认显示第一组
    function showResult() {
        var $ul = options.paginElement.find("ul");
        $ul.find("li").removeClass("active");
        $ul.find("li:eq(" + (options.curpage % options.pageNum + 1) + ")").addClass("active");

        //添加
        var startId = options.itemCount * options.curpage;
        var endId = (options.itemCount * (options.curpage + 1));
        if (endId > options.showData.length) {
            endId = options.showData.length;
        }
        var currList = options.showData.slice(startId, endId);
        options.tableElement.find("tbody").empty();
        $.each(currList, function (n, info) {
            addTab(info);
        });
    }

    //默认显示第一组
    function initPagination(startPage,curpage) {
        var $ul = options.paginElement.find("ul").empty();
        if (options.pageCount != 0) {
            //上一页
            var $showPre = $('<li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>');
            $showPre.click(function () {
                if (options.curpage > startPage * options.pageNum) {
                    options.curpage--
                    showResult();
                } else if (options.curgroup > 0) {
                    var cur_curpage = options.curpage - 1;
                    options.curgroup--;
                    initPagination(options.curgroup);
                    options.curpage = cur_curpage;
                    showResult();
                }
            });
            $ul.append($showPre);

            for (var i = 0; i < options.pageNum; i++) {
                if (i + startPage * options.pageNum >= options.pageCount) break;
                var $pageBlok = $('<li value="' + i + '" class="active"><a href="#">' + (startPage * options.pageNum + 1) + '</a></li>');
                if (i > 0) {
                    $pageBlok = $('<li value="' + (i + startPage * options.pageNum) + '"><a href="#!">' + (i + startPage * options.pageNum + 1) + '</a></li>');
                }
                $pageBlok.click(function () {
                    options.curpage = $(this).val();
                    showResult();
                });
                $ul.append($pageBlok);
            }

            //向下翻页
            var $showNext = $('<li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>');
            $showNext.click(function () {
                if (options.curpage < options.pageCount - 1 && options.curpage < startPage * options.pageNum + (options.pageNum - 1)) {
                    options.curpage++;
                    showResult();
                } else if (options.curgroup < options.groupCount - 1) {
                    options.curgroup++;
                    initPagination(options.curgroup);
                }
            });
            $ul.append($showNext);
        }

        //初始化显示第一页
        options.curpage = curpage ? curpage : startPage * options.pageNum;
        showResult();
    }

    //分析数据
    function analyzing(){
        options.pageCount = Math.floor(options.showData.length / options.itemCount);
        if (options.showData.length % options.itemCount != 0) options.pageCount = options.pageCount + 1;
        if (options.pageCount <= options.pageNum) {
            options.groupCount = 1;
        } else {
            options.groupCount = Math.floor(options.pageCount / options.pageNum);
            if (options.pageCount % options.pageNum != 0) options.groupCount = options.groupCount + 1;
        }
        options.paginElement.find("nav").find(".table_text").text('共' + options.showData.length + '条记录');
    }

    //如何有paginElement 分页元素
    if (options.paginElement) {
        analyzing();

        //添加分页元素
        var $ul = $('<nav aria-label="Page navigation"><ul class="pagination" style="position: relative;bottom:-3px;margin: 0 5px;"></ul>' +
            '<div style="display: inline-block;"><span class="table_text" style="position: relative;top: -8px;">共' + options.showData.length + '条记录</span></div></nav>');
        options.paginElement.empty().append($ul);

        //显示第一组
        initPagination(0);
    }else {

        //显示所有数据
        $.each(options.showData, function (i, info) {
            addTab(info);
        });
    }

    //操作数据和表格的方法
    return {
        jump: function (idx) {

            //跳转到第几页
            var count = Math.ceil(idx / options.pageNum);
            if (count > 0 && count < options.groupCount + 1) {
                options.curgroup = count - 1;

                //1 先跳到第几组
                initPagination(options.curgroup);
                if (idx > 0 && idx < options.pageCount + 1) {
                    options.curpage = idx - 1;
                } else {
                    options.curpage = options.pageCount - 1;
                }

                //2 再显示第几页
                showResult();
            }
        },
        remove: function ($tr) {

            //删除
            var index = $tr.attr("hindex");
            removeHTabList(options.showData, index);
            analyzing();
            options.curgroup = ( options.curgroup < options.groupCount ) ? options.curgroup : ( options.curgroup == 0 ? 0 : options.curgroup -1 );
            options.curpage = (options.curpage < options.pageCount) ? options.curpage : ( options.curpage == 0 ? 0 :  options.curpage - 1);
            initPagination(options.curgroup,options.curpage);
        },
        //添加 修改
        append: function (info) {
            var data = $.extend(true,{},info);
            data.hindex = options.maxRow + 1;
            options.maxRow++;
            options.showData.unshift(data);
            analyzing();
            initPagination(options.curgroup,options.curpage);
        },
        insert: function (info,$tr) {
            var hindex = $tr.attr("hindex");
            var idx = getRowOnHTab(options.showData,hindex);
            var data = $.extend(true,{},info);
            data.hindex = options.maxRow + 1;
            options.maxRow++;
            options.showData.splice(idx, 0,data);
            analyzing();
            initPagination(options.curgroup,options.curpage);
        },
        update: function (info,$tr) {
            var index = $tr.attr("hindex");
            info.hindex = index;
            updateHTabList(options.showData,info);
            addTab(info, $tr);
        }
    };
}

function updateHTabList(list,info) {
    $.each(list, function (i, v) {
        if (v.hindex == info.hindex) {
            list[i] = info;
            return false;
        }
    });
}

function removeHTabList(list,hindex) {
    $.each(list, function (i,v) {
        if (v.hindex == hindex){
            list.splice(i, 1);
            return false;
        }
    });
}

function getRowOnHTab(list,hindex) {
    var row = "";
    $.each(list, function (i,v) {
        if (v.hindex == hindex){
            row = i;
            return false;
        }
    });
    return i;
}