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

最新推荐文章于 2024-09-01 14:04:36 发布

那个id是什么东西

最新推荐文章于 2024-09-01 14:04:36 发布

阅读量2.2k

点赞数

分类专栏： util

本文链接：https://blog.csdn.net/qq_36666181/article/details/80927254

版权

本文展示了如何使用JQuery在前端实现表格分页，无需与后台交互。通过HTML结构、JavaScript（JQuery）脚本和CSS样式，实现动态加载和分页效果。

摘要由CSDN通过智能技术生成

效果图：

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>'
    +'