pagination.js 使用

Posted 2021-01-14 生命如风

 pagination.js 

使用方式

$(‘.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;
            },