使用方式
$('.paginationjs').pagination({ dataSource: 'DetailImage?handler=Search', locator: 'rows', //totalNumber: 120, totalNumberLocator: function (response) { return response.total; }, pageSize: 12, alias: { pageNumber: "PageIndex", pageSize:"PageSize" }, ajax: { //beforeSend: function () { // dataContainer.html('Loading data from flickr.com ...'); //} type: "POST", //url: "DetailImage?handler=Search", data: req, dataType: 'json', //contentType: "application/json", headers: { "RequestVerificationToken": $('input:hidden[name="__RequestVerificationToken"]').val() }, }, callback: function (data, pagination) { // template method of yourself var temp = pagination; //var html = template(data); //dataContainer.html(html); var html = ""; $.each(data, function (index, item) { html += '<div class="col-sm-6 col-md-3"> ' html += '<div class="thumbnail"> ' html += ' <img src="/api/image/' + item.ImageId + '" alt="..." width=600, height=600>' html += ' <div class="caption">' html += ' <h3>' + item.CreateDateTime + '</h3>' //html += '<p>...</p>' //html +=' <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>' html += ' </div>' html += '</div>' html += '</div>' }); $("#data-container").html(html); //dataContainer.html(html); }, formatResult: function (data) { //return html; },