效果图:
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;
}