拿代碼來說話
我們的需求就是點擊翻頁功能，實現表格內容局部刷新且能夠翻到對應的頁面上，不明白？ 那么就看看下面的圖，需要達到的效果如下所示：
現在要實現的功能就是把紅線框起來的表單內容 在點擊翻頁的時候 只刷新這個表單的內容，其他的內容不變。這就是我們要的目的，為啥要這么做？有1個原因：
- 局部刷新不會影響我們日期選擇框內的內容。如果是整個頁面刷新，那么刷新之后那個日期選擇框就是為空了。
需求以及原因了解后，那么就看看代碼，首先從HTML代碼看起，其次在JS代碼，最后是后端Python代碼。
HTML
HTML代碼很簡單，不多說。
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#meet" aria-controls="meet" role="tab" data-toggle="tab">會議時長</a></li>
<li role="presentation"><a href="#people_minute" aria-controls="people_minute" role="tab" data-toggle="tab">人數與分鍾</a></li>
<li role="presentation" ><a href="#total_chart" aria-controls="total_chart" role="tab" data-toggle="tab">總體曲線</a></li>
<li role="presentation" ><a href="#realtime_chart" aria-controls="realtime_chart" role="tab" data-toggle="tab">實時曲線</a></li>
<li role="presentation" ><a href="#PSTN_VOIP_chart" aria-controls="PSTN_VOIP_chart" role="tab" data-toggle="tab">PSTN和VOIP曲線</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="meet">
<br>
<p>
請選擇日期: <input type="text" id="datepicker" class="datepicker">
<button class="btn btn-info" type="button" onclick="get_data(this)">確定查詢</button>
</p>
<div id="meet_detail" style="display: none"> <!-- 只在這個div內的table里更新數據 -->
<table id="meet_detail_table" class="display table table-hover" >
<thead >
<tr id="meet_first_tr">
<th data-field="meet_id" >會議ID</th>
<th data-field="meet_name" >會議名稱</th>
<th data-field="meet_create_time" >創建時間</th>
<th data-field="meet_start_time" >開始時間</th>
<th data-field="meet_end_time" >結束時間</th>
<th data-field="meet_time" >會議持續</th>
<th data-field="meet_number" >人數</th>
<th data-field="meet_pstn" >PSTN比例</th>
</tr>
</thead>
</table>
<span id="meet_total" style="float: left"></span>
<nav style="float: right" aria-label="Page navigation"> <!-- 翻頁按鈕的代碼 -->
<ul class="pagination" id="page">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div>
<div>
Jquery代碼
主要借助於jquery來實現的。
function get_data(arg){ // 獲取會議時長的方法
var select_type = $(arg).siblings("select").val();
var start_time = $(arg).siblings("input:first").val();
var end_time = $(arg).siblings("input:last").val();
var request_type = $(arg).parents().parents().attr('id');
var page = 1
if(start_time,end_time){ // 表示時間都輸入了，那么就緒要判斷開始時間是否大於結束時間
if(start_time>end_time){ // 比較時間，判斷開始時間是否大於結束時間
toastr.error("錯誤,目前是開始時間大於結束時間!!","請選擇正確的時間");
return false
}
}else if(!start_time){ // 表示沒有選擇任何時間
toastr.error("請選擇時間","錯誤");
return false
}
$.ajax({
url:'{% url "Pc3_Report" %}',
type:'post',
dataType:'json',
data:{"start_time":start_time,"end_time":end_time,"select_type":select_type,"request_type":request_type,"page":page},
success: function(callback){
show_meet_detail(callback,start_time,end_time,request_type)
},
error: function(){
}
})
}
function show_meet_detail(callback,start_time,end_time,request_type) { // 顯示會議狀況的詳情和做翻頁按鈕
$("#meet_detail").show();
$("#meet_total").html(callback.total); // 顯示總數據量
$("#meet_detail_table tr:first").siblings('tr').remove() // 清空之前的數據
for(var i in callback.record){
var per_record = callback.record[i];
var html_code = '<tr id="record_'+ i +'"><td>'+per_record[0]+'</td><td>'+per_record[1] +'</td><td>'+ per_record[2] +'</td><td>'+
per_record[3] +'</td><td>'+ per_record[4] +'</td><td>'+ per_record[5] +'</td><td>' +
per_record[6] +'</td><td>'+ per_record[7]
$('#meet_detail_table tr:last').after(html_code)
}
$("#page li:first").siblings('li').children('.delete_mark').remove(); // 先刪除之前的換頁的html代碼
for(var i=Number(callback.num_pages);i>0;i--){
var page_num = Number(i);
var page_range = Math.abs(page_num - Number(callback.current_page))
if( page_range <= 2 ){ // 這一步的目的在於頁面顯示的時候是共5頁的分頁按鈕
if(Number(callback.current_page) == page_num){ // 說明是當前頁，那么進行高亮顯示，把class設置為active
$("#page li:first").after('<li class="active" ><a href="#" class="delete_mark" type="' + request_type + '" start_time="' + start_time + '" end_time="' + end_time + '" ' +
'onclick="go_to_page(this)" current_page_num="' + page_num + '">' + page_num + '</a></li>')
// 下面的代碼是實現返回第一頁的功能
$("#page li:first a").attr("onclick","go_to_page(this)");
$("#page li:first a").attr("type",request_type);
$("#page li:first a").attr("start_time",start_time);
$("#page li:first a").attr("end_time",end_time);
$("#page li:first a").attr("current_page_num",1); // 設置跳轉到第一頁
// 下面的代碼是實現跳轉到末頁
$("#page li:last a").attr("onclick","go_to_page(this)");
$("#page li:last a").attr("type",request_type);
$("#page li:last a").attr("start_time",start_time);
$("#page li:last a").attr("end_time",end_time);
$("#page li:last a").attr("current_page_num",callback.num_pages); // 設置跳轉到最后一頁
}else { // 說明不是當前頁，那么不進行高亮顯示
$("#page li:first").after('<li><a href="#" class="delete_mark" type="' + request_type + '" start_time="' + start_time + '" end_time="' + end_time + '" ' +
'onclick="go_to_page(this)" current_page_num="' + page_num + '">' + page_num + '</a></li>')
}
}
}
}
function go_to_page(arg){ // 獲取指定頁的內容
var request_type = $(arg).attr('type');
var start_time = $(arg).attr('start_time');
var end_time = $(arg).attr('end_time');
var page = $(arg).attr('current_page_num');
$.ajax({
url:'{% url "Pc3_Report" %}',
type:'post',
dataType:'json',
data:{"start_time":start_time,"end_time":end_time,"request_type":request_type,"page":page},
success: function(callback){
console.log(callback);
show_meet_detail(callback,start_time,end_time,request_type)
},
error: function(){
}
})
}
django - 視圖代碼
URL路由功能太簡單就不贅述，直接看視圖代碼
def Pc3_Report(request):
'''
實現分頁功能for geting meet data
:param request:
:return:
'''
if request.method == "POST":
request_type = request.POST.get('request_type')
if request_type == 'meet':
# 造的假數據，方便測試，實際上是從數據庫里面取出來的。
records = [(111,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),(111,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),
(112,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),(111,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),
(113,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),(111,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),
(114,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),(111,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),
(115,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),(111,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),
(116,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),(111,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),
(117,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),(14,'aaaa',"2016/0702","2016/07/03","2017/0/052",13,110,"90%"),]
response_data = {"record":[]}
pageinator = Paginator(records,1)
# pageinator = Paginator(records,settings.PER_PAGE)
page = request.POST.get('page')
try:
contacts = pageinator.page(page)
except PageNotAnInteger: # 如果輸入到不是一個數字，發送第一頁
contacts = pageinator.page(1)
except EmptyPage: # 如果獲取到超過來頁數范圍，那么就返回最后一頁。
contacts = pageinator.page(pageinator.num_pages)
for i in contacts:
response_data["record"].append(i)
response_data["num_pages"] = pageinator.num_pages # 總共頁數
response_data["total"] = "共%s條記錄,總共%s頁"%(pageinator.count,pageinator.num_pages)
response_data['current_page'] = page # 當前在第幾頁
return HttpResponse(json.dumps(response_data))
至此，以上代碼能給實現翻頁的功能實現局部刷新。