Widget:数据查询

<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">
      <a href="#">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="gridPageBtn"><a href="#">1</a></li>
    <li class="gridPageBtn"><a href="#">2</a></li>
    <li class="gridPageBtn"><a href="#">3</a></li>
    <li class="gridPageBtn"><a href="#">4</a></li>
    <li class="gridPageBtn"><a href="#">5</a></li>
    <li class="gridLastPageBtn" data-page="-1">
      <a href="#">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
<div id="queryDataGrid"></div>
<nav style="text-align:right;" aria-label="Page navigation">
  <ul class="pagination">
    <li class="gridFirstPageBtn" data-page="0">
      <a href="#">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="gridPageBtn"><a href="#">1</a></li>
    <li class="gridPageBtn"><a href="#">2</a></li>
    <li class="gridPageBtn"><a href="#">3</a></li>
    <li class="gridPageBtn"><a href="#">4</a></li>
    <li class="gridPageBtn"><a href="#">5</a></li>
    <li class="gridLastPageBtn" data-page="-1">
      <a href="#">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
<script type="text/javascript">
var submitBtnId = "<!--{$btnid|escape:'javascript'}-->";
var tableHeader = ("<!--{$header|escape:'javascript'}-->").replace("{ |", "{|");
var tableFooter = '\n';
var conditions  = "";
var printColumn = paramsFormmatter("<!--{$print|escape:'javascript'}-->", "|?");
var parameters =  paramsFormmatter(("<!--{$param|escape:'javascript'}-->").replace(/:/g, "="), "|");
var limit = <!--{$limit|escape:'javascript'}-->;
var count = 0;
var firstQuery = "<!--{$query|escape:'javascript'}-->";
var $ready = function (){
	setTimeout(function(){
		if(String(firstQuery) === "true") queryData();
		bindClickEvents();
	},1000)
}

function bindClickEvents(){
	$("body").on("click", ".btn.queryParams", function(){
		var isSelected = $(this).hasClass("selected");
		$(this)[isSelected?"removeClass":"addClass"]("selected");
	}).on("click", "#" + submitBtnId, function(){
		queryData()
	}).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));
	})
}

function queryData(){
	conditions = getQueryParams();
	$.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["*"])
	});
}

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:"#"});
	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");
	return page;
}

function getQueryParams(){
	var conditions = {}, query = [];
	$(".btn.queryParams.selected").each(function(){ 
		var key = $(this).parents("tr").attr("data-ask-key");
		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("");
}

function paramsFormmatter(param, connector){
	return ("," + param).split(",").join(connector);
}
</script>
<script>(function () { var t = function () { window.jQuery && window.mw ? $ready() : window.setTimeout(t, 100); }; t();  })();</script>