表格无刷新分页解决办法

最新推荐文章于 2021-08-06 14:41:36 发布

暖暖的月光

最新推荐文章于 2021-08-06 14:41:36 发布

阅读量490

点赞数

本文链接：https://blog.csdn.net/u012382571/article/details/44617381

版权

最终还是采用jQuery Pagination Plugin 2.2

</pre><pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery Pagination Playground</title>
		
		<link rel="stylesheet" href="../pagination.css" />
		
        <script type="text/javascript" src="lib/jquery.min.js"></script>
		<script type="text/javascript" src="lib/StringBuilder.js"></script>
        <script type="text/javascript" src="../jquery.pagination.js"></script>
        
        <script type="text/javascript">
            var arr = [];
			for(var i = 0; i < 100; i++){
				var date = new Date();
				arr.push({
					number: i + 1,
					_date: date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds()
				});
			} 
			
			var sb = new StringBuilder();
			sb.append("hello world");
			alert(sb.toString());
			
			function initTable(page_id){
                $('#dataBody').html('');
				for(var i = 0; i < 5; i++){
					$('#dataBody').append('<tr><td>' + arr[page_id * 5 + i].number + '</td><td>' + arr[page_id * 5 + i]._date + '</td></tr>');
				}
                return false;
            }
           
            function getOptionsFromForm(){
                var opt = {callback: initTable};
               
				opt.items_per_page = 5;
				opt.num_display_entries = 5;
				opt.num_edge_entries = 2;
				
				opt.prev_text = "上一页";
				opt.next_text = "下一页";
				
                return opt;
            }
			
            $(document).ready(function(){
                var optInit = getOptionsFromForm();
				initTable(0);
                $("#Pagination").pagination(arr.length, optInit);
            });
            
        </script>
    </head>
    <body>
    	<h1>jQuery Pagination Plugin Demo</h1>
        <div id="Pagination">
        </div>
		<br style="clear:both;" />
        <h3>简单分页</h3>
		<dl id="Searchresult">
			<table>
				<thead>
					<tr>
						<th style="width:100px">ID</th>
						<th style="width:100px">日期</th>
					</tr>
				</thead>
				<tbody id="dataBody">
				
				</tbody>
			</table>
		</dl>
        
		
    </body>
</html>