<li class="btn btn-default queryParams " href="#" role="button" data-conditions="" ></li>
<style>
li.btn.queryParams.selected {
color: #333 !important;
background-color: #e6e6e6;
border-color: #adadad;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}
</style>
<div style="float:left;line-height: 44px;"> 查询到结果 <span id="queryCount">0</span> 个,每页显示 <span id="queryLimit">0</span> 个</div>
<nav style="text-align:right;" aria-label="Page navigation">
<ul class="pagination">
<li class="gridFirstPageBtn" data-page="0">
«
</li>
<li class="gridPageBtn">
1</li>
<li class="gridPageBtn">
2</li>
<li class="gridPageBtn">
3</li>
<li class="gridPageBtn">
4</li>
<li class="gridPageBtn">
5</li>
<li class="gridLastPageBtn" data-page="-1">
»
</li>
</ul>
</nav>
<div id="queryDataGrid" style="margin-top:10px"></div>
<nav style="text-align:right;" aria-label="Page navigation">
<ul class="pagination">
<li class="gridFirstPageBtn" data-page="0">
«
</li>
<li class="gridPageBtn">
1</li>
<li class="gridPageBtn">
2</li>
<li class="gridPageBtn">
3</li>
<li class="gridPageBtn">
4</li>
<li class="gridPageBtn">
5</li>
<li class="gridLastPageBtn" data-page="-1">
»
</li>
</ul>
</nav>
<script type="text/javascript">
var submitBtnId = "";
var tableHeader = ("").replace("{ |", "{|");
var tableFooter = "" || '\n|}';
var defaultSearch = "";
var conditions = "";
var printColumn = paramsFormmatter("", "|?");
var parameters = paramsFormmatter(("").replace(/:/g, "="), "|");
var limit = ;
var count = 0;
var defaultParams = "";
var $ready = function (){
bindClickEvents();
defaultParams = getQueryParams();
}
function bindClickEvents(){
$("body").on("click", ".btn.queryParams", function(){
var isSelected = $(this).hasClass("selected");
if(!isSelected && $(this).data("type") === "radio") {
$("[data-group='"+$(this).data("group")+"']").removeClass("selected");
}
$(this)[isSelected?"removeClass":"addClass"]("selected");
}).on("click", "#" + submitBtnId, function(){
queryData()
}).on("click", "#clearParamBtn", function(){
$(".selected").removeClass("selected")
}).on("click", ".gridPageBtn, .gridFirstPageBtn, .gridLastPageBtn", function(){
if($(this).hasClass("hide") || $(this).hasClass("active")) return false;
var page = $(this).attr("data-page") || $(this).text();
getPageData(limit, refreshPager(count, limit, page));
})
if(defaultSearch === "true" || defaultSearch === "1") queryData()
}
function queryData(){
conditions = getQueryParams() || defaultParams;
$.getJSON( mw.util.wikiScript( 'api'), {
format: 'json',
action: 'parse',
text: '{'+'{#ask:'+conditions +'|format=count}}',
contentmodel: 'wikitext'
}).done( function ( data ) {
count = parseInt($(data.parse.text["*"]).text());
$("#queryCount").text(count);
$("#queryLimit").text(limit);
refreshPager(count, limit, 1);
getPageData(limit, 1);
});
}
function getPageData(limit, page){
limit = Number(limit);
page = Number(page);
var parametersTemp = parameters + "|limit=" + limit + "|offset=" + (page-1) * limit;
var queryText = tableHeader + '{'+'{#ask:' + conditions + printColumn + parametersTemp + '}}' + tableFooter;
$.getJSON( mw.util.wikiScript( 'api'), {
format: 'json',
action: 'parse',
text: queryText,
contentmodel: 'wikitext'
}).done( function ( data ) {
$("#queryDataGrid").html(data.parse.text["*"]);
$(".sortable").tablesorter();
});
}
function refreshPager(count, limit, page){
var sumPage = Math.min(Math.ceil(Number(count)/Number(limit)));
page = Number(page);
page = page === 0 ? 1 : page;
page = page < 0 ? sumPage : page;
var pageStart = Math.max(1, page-2);
var pageEnd = Math.min(Math.ceil(count/limit), pageStart + 4);
pageStart = pageEnd <= 5 ? 1 : pageStart;
var $a = $("<a>").attr({href:"javascript:void(0);"});
var btnArray = [];
for(var i = pageStart; i <= pageEnd; i++){
btnArray.push($("<li>").attr({class:"gridPageBtn" + (page === i?" active":"")}).append($a.clone().text(i)));
}
$(".gridPageBtn").remove();
$(".pagination li:first-child").after(btnArray);
$(".gridFirstPageBtn")[page === 1?"addClass":"removeClass"]("hide");
$(".gridLastPageBtn")[page === sumPage || pageEnd === 1?"addClass":"removeClass"]("hide");
document.body.scrollTop = $("#queryDataGrid").offset().top - 100;
return page;
}
function getQueryParams(){
var conditions = {}, query = [], str = "";
$(".btn.queryParams.selected").each(function(){
var key = $(this).parents("tr").attr("data-ask-key");
if(key === "") { str += $(this).attr("data-conditions"); return true}
if(conditions[key] === undefined) conditions[key] = [];
conditions[key].push($(this).attr("data-conditions"));
})
$.each(conditions, function(key, valArr){
query.push("["+"[" + key + valArr.join("||") + "]"+"]")
});
return query.join("") + str;
}
function paramsFormmatter(param, connector){
return ("," + param).split(",").join(connector);
}
</script>
<script>(function () { var t = function () { window.jQuery && window.mw && window.mw.util ? $ready() : window.setTimeout(t, 100); }; t(); })();</script>