jquery 仅在前端完成table分页(没有与后台的交互)

效果图：

 

 

html:

<script type="text/javascript" src="../main/js/paging.js"></script>

<a class="glyphicon glyphicon-plus-sign" onclick="addrow()">添加一行</a>
<a class="glyphicon glyphicon-plus-sign" onclick="addmore()">添加多行</a>
<table class="table table-bordered" id="tablestru">
	<tr>
		<td>列名</td>
		<td>类型</td>
		<td></td>
	</tr>
								
</table>
<div id="nextSave-page" class="pagecss"></div>

newMain.js:

function addrow(){

	var tables = $('#tablestru');
	var addtr = $("<tr>"
    +'<td style="text-align:center;width:50%"><input style="width:96%" name="columnName" maxlength="25" onblur="addonerow()"></input></td>'
    +'<td style="text-align:center;width:30%">'
    +'<select style="width:96%" name="kindName" id="kindNameSelect">'
    +'<option value="bigint">bigint</option>'
    +'<option value="double">double</option>'
    +'<option value="decimal">decimal</option>'
    +'<option value="varchar">varchar</option>'
    +'<option value="boolean">boolean</option>'
    +'<option value="datetime">datetime</option>'
    +' </select>'
    +'</td>'
    +'<td style="text-align:center;width:20%"><a class="glyphicon glyphicon-remove-circle" onclick="deleteTrRow(this)">删除</a></td>'
    +'</tr>');
    addtr.appendTo(tables);     
}

function MoreSubmit(){
	var kindcount=$("#myModalMore-more-input").val();
	var kindname=$("#myModalMore-name-input").val();
	var kindchar=$("#myModalMore-char-input").val();
	var beforlen =$("#tablestru tr").length-1;
	var tables = $('#tablestru');
	for(var i=1;i<=kindcount;i++){
		var match=beforlen+i;
		var addtr = $("<tr>"
			    +'<td style="text-align:center;width:50%"><input style="width:96%" name="columnName" maxlength="25" value="'+kindname+"_"+match+'"></input></td>'
			    +'<td style="text-align:center;width:30%">'
			    +'<select style="width:96%" name="kindName" id="kindNameSelect'+match+'">'
			    +'<option value="bigint">bigint</option>'
			    +'<option value="double">double</option>'
			    +'<option value="decimal">decimal</option>'
			    +'<option value="varchar">varchar</option>'
			    +'<option value="boolean">boolean</option>'
			    +'<option value="datetime">datetime</option>'
			    +' </select>'
			    +'</td>'
			    +'<td style="text-align:center;width:20%"><a class="glyphicon glyphicon-remove-circle" onclick="deleteTrRow(this)">删除</a></td>'
			    +'</tr>');
			    addtr.appendTo(tables); 
			    $("#kindNameSelect"+match).find("option[value='"+kindchar+"']").attr("selected",true);
	}
	
	$("#myModalMore").modal('hide');
	var countRows=$("#tablestru tr").length-1;
	var totalPage=Math.ceil(countRows/5);
	create(1,totalPage);
	showtablerow(1);
	$("#nextSave-page").show();
}

function create(pageNo,totalPage){
	
	$('#nextSave-page').paging({pageNo:pageNo,totalPage:totalPage,callback:function(cur){
	      // console.log(cur);
	    }});
}

function showtablerow(page){
	var endrow=page*5;
	var startrow=(page-1)*5+1;
	$("#tablestru tr").each(function(i){
        if((i>=startrow&&i<=endrow)||i===0){
        	$(this).show();
        	
        }else{
        	$(this).hide();
        }
});
}

function goPage(){
	var gopage=$("#go-page-row").val();
	showtablerow(gopage);
}

function addonerow(){
	var countRows=$("#tablestru tr").length-1;
	var totalPage=Math.ceil(countRows/5);
	create(totalPage,totalPage);
	showtablerow(totalPage);
}

function deleteTrRow(tr){

    $(tr).parent().parent().remove();
    var countRows=$("#tablestru tr").length-1;
	var totalPage=Math.ceil(countRows/5);
	create(1,totalPage);
	showtablerow(totalPage);
    }

paging.js

;(function($,window,document,undefined){
        var initDate={
            pageNo:1,
            totalPage:1,
            callback:function(){}
        };
        function Paging(element,options){
            this.element = element;
            this.options=options=$.extend(initDate,options||{});
            this.init();
        }
        Paging.prototype={ 
            constructor:Paging,
            init:function(){
                this.creatHtml();
                this.bindEvent();
            },
            creatHtml:function(){
                var me=this;
                var content="";
                var current=me.options.pageNo;
                var total=me.options.totalPage;
                if(current > 1){
//                	alert(current)
//                	alert(total)
                    content += "<a ><</a>";
                }
                if(total > 7){
                    if(current < 4){
                        for(var i=1;i<7;i++){
                            if(current==i){
                                content += "<a class='current' >"+i+"</a>";
                            }else{
                                content += "<a >"+i+"</a>";
                            }
                        }
                        content += "...";
                        content += "<a >"+total+"</a>";
                    }else{
                        if(current < total - 3){
                            content += "<a name='1' type='button' class='page num'>1</a>";
                            content += "...";
                            for(var i=current-2;i<current+3;i++){
                                if(current==i){
                                    content += "<a class='current' >"+i+"</a>";
                                }else{
                                    content += "<a >"+i+"</a>";
                                }
                            }
                            content += "...";
                            content += "<a >"+total+"</a>";
                        }else{
                            content += "<a >1</a>";
                            content += "...";
                            for(var i=total-5;i<total+1;i++){
                                if(current==i){
                                    content += "<a class='current' >"+i+"</a>";
                                }else{
                                    content += "<a >"+i+"</a>";
                                }
                            }
                        }
                    }
                }else{
                    for(var i=1;i<total+1;i++){
                        if(current==i){
                            content += "<a class='current' >"+i+"</a>";
                        }else{
                            content += "<a >"+i+"</a>";
                        }
                    }
                }
                if(current < total){
                    content += "<a >></a>";
                }
                content += " 到第 ";
                content += "<input max='4' maxlength='4' value='"+current+"' type='text' id='go-page-row'/>";
                content += " 页 ";
                content += "<a onclick='goPage()'>Go</a>";
                me.element.html(content);
            },
            bindEvent:function(){
                var me=this;
                me.element.on('click','a',function(){
                    var num=$(this).html();
                    if(num=="<"){
                        me.options.pageNo=+me.options.pageNo-1;
                    }else if(num==">"){
                        me.options.pageNo=+me.options.pageNo+1;
                    }else if(num=="Go"){
                        var ipt=+me.element.find('input').val();
                        if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
                            me.options.pageNo=ipt;
                        }
                    }else{
                        me.options.pageNo=+num;
                    }
                    me.creatHtml();
                    showtablerow(me.options.pageNo)
                    if(me.options.callback){
                        me.options.callback(me.options.pageNo);
                    }
                });
            }
        };
        $.fn.paging=function(options){
            options=$.extend(initDate,options||{});
            return new Paging($(this),options);
        }
    })(jQuery,window,document);

css

#nextSave-page a{
        width: 23px;
        height: 23px;
        border: 1px solid #dce0e0;
        text-align: center;
        margin: 0 4px;
        cursor: pointer;
        display: inline-block;
    }
.current{
        background-color: #5ac3e7;
    }
    
.pagecss{
	text-align: center;
}    

#nextSave-page input{
    width: 6%;
    text-align: center;
    }