Can this pagination task be accomplished without the use of backgrid?

Question

Can this pagination task be accomplished without the use of backgrid?

I have been exploring ways to implement server-side pagination similar to what Datatables offers, and during my search I came across the backbone.paginator library on GitHub. However, I am curious if there are any other options available as well.

After examining their examples, I noticed that they utilized another library called backgrid.js to assist with this task, along with its paginator plugin. You can find more information about both backgrid.js and its paginator plugin here.

I wonder if it's possible to achieve server-side pagination without using Backgrid? If anyone has an alternative approach or example to share, please do so.

javascript backbone.js pagination backgrid backbone.paginator

Answer 1

Answer №1

Here is a JS/php code snippet I've put together for server-side pagination that you can tweak to suit your requirements and potentially refine further later on.

To begin, establish a connection with the database and create a table specifically for pagination:

CREATE TABLE `pagination` (
    `id` INT(16) NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `name` VARCHAR(50) NOT NULL,
    `age` INT(3) NOT NULL,
    `company` VARCHAR(50) NOT NUL
)

Next, insert 400 identical records:

$i = 0;
while ($i < 400) {
    $pag = "insert into pagination (id, name, age, company) VALUES ('NULL','john','40','google')";
    $excu = $mysqli->query($pag);
    $i++;
}

Then, create a file named test.php:

<!DOCTYPE html>
<html><head>
<style>
#container {overflow-x: hidden; max-width: 90%; min-width: 90%; margin: 0 auto;}
td {max-width: 10%; min-width: 10%;}
tr, td {border: 1px solid black;}
#page {display: inline; border: 1px solid black;}
#numb, #numbs {display: none;}
.button {background: white;}
</style>
</head>
<body >
<?php $defaultoption = "10"; ?>
<div id="container"></div><span id="numb"></span><span id="numbs"><?php echo 
$defaultoption; ?></span>
<script type="text/javascript" src="js.js"></script>
</body>
</html>

In addition, create a file named js.js:

window.onload = function() {
    var container = document.getElementById("container");
    var table = document.getElementById("numbs").innerHTML;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            container.innerHTML = xhttp.responseText;
            var button = document.getElementById("button");
            button.children[0].disabled = true;
            button.children[0].style.background = "yellow";
        }
    };
    xhttp.open("POST", "testa.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("table=" + table);
}

// More JavaScript functions here...

Create another file named testa.php:

<?php
$pag = "SELECT * FROM pagination ORDER BY id ASC ";
$exc = $mysqli->query($pag);
$numrows = mysqli_num_rows($exc);

// Additional PHP logic for pagination goes here...
?>

I hope this code provides some assistance to you.

Answer 2

Here is a JS/php code snippet I've put together for server-side pagination that you can tweak to suit your requirements and potentially refine further later on.

To begin, establish a connection with the database and create a table specifically for pagination:

CREATE TABLE `pagination` (
    `id` INT(16) NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `name` VARCHAR(50) NOT NULL,
    `age` INT(3) NOT NULL,
    `company` VARCHAR(50) NOT NUL
)

Next, insert 400 identical records:

$i = 0;
while ($i < 400) {
    $pag = "insert into pagination (id, name, age, company) VALUES ('NULL','john','40','google')";
    $excu = $mysqli->query($pag);
    $i++;
}

Then, create a file named test.php:

<!DOCTYPE html>
<html><head>
<style>
#container {overflow-x: hidden; max-width: 90%; min-width: 90%; margin: 0 auto;}
td {max-width: 10%; min-width: 10%;}
tr, td {border: 1px solid black;}
#page {display: inline; border: 1px solid black;}
#numb, #numbs {display: none;}
.button {background: white;}
</style>
</head>
<body >
<?php $defaultoption = "10"; ?>
<div id="container"></div><span id="numb"></span><span id="numbs"><?php echo 
$defaultoption; ?></span>
<script type="text/javascript" src="js.js"></script>
</body>
</html>

In addition, create a file named js.js:

window.onload = function() {
    var container = document.getElementById("container");
    var table = document.getElementById("numbs").innerHTML;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            container.innerHTML = xhttp.responseText;
            var button = document.getElementById("button");
            button.children[0].disabled = true;
            button.children[0].style.background = "yellow";
        }
    };
    xhttp.open("POST", "testa.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("table=" + table);
}

// More JavaScript functions here...

Create another file named testa.php:

<?php
$pag = "SELECT * FROM pagination ORDER BY id ASC ";
$exc = $mysqli->query($pag);
$numrows = mysqli_num_rows($exc);

// Additional PHP logic for pagination goes here...
?>

I hope this code provides some assistance to you.

Answer 3

Answer №2

I successfully completed the task

within the View initialize function

Triggering the necessary action

this.reloadCustomPages();

Below is the code for its implementation

reloadCustomPages: function(options) {
    var self = this;
    self.block();
    self.customPages.fetch({data: $.param(options)}).always(function () {
        self.unblock();
    });
}

In the backend (using Java Spring), I made changes to the API to accommodate new query strings

@RequestParam(value = "pageNumber", defaultValue = "1"),
@RequestParam(value = "perPage", defaultValue = "10")

Instead of directly returning the list, it now includes pagination information like

Total number of items in the database
Current page number
Page size
And the items themselves

Here's a snippet from the server-side code for reference:

@RequestMapping(value = "/editor/pages", method = RequestMethod.GET)
public void listPages(@RequestParam(value = "pageNumber", defaultValue = "1") Integer pageNumber,
                          @RequestParam(value = "perPage", defaultValue = "10") Integer perPage,
                          HttpServletResponse httpResp) throws IOException {

    Long recordsTotal = pageSvc.findTotalNumberOfPages();// select count(*) from table_name    
    List<PbCustomPage> pages = pageSvc.findPages(pageNumber, perPage);// server side query that gets pagenated data 

    BackbonePaginatorResponse response = new BackbonePaginatorResponse();// I created this simple class 
    response.setTotalCount(recordsTotal);
    response.setPageNumber(pageNumber);
    response.setPerPage(perPage);
    response.setItems(pages);

    httpResp.setContentType("application/json");
    json.createCustomPageSerializer().addProperties().serialize(response, httpResp.getWriter());// just make your server send that object
}

The function call instructs the server to fetch page 1 with a page size of 10

In my template, I have included this piece of code

<div class="pagination clear" style="text-align: center;">
    <%= customPages.paginationHtml %>
</div>

This is how I populate it

customPages.paginationHtml = this.generatePagination(customPages);

Here's the crucial part:

generatePagination: function (paginationResponse) {
    var currentPage = paginationResponse.pageNumber,
        lastPage = paginationResponse.totalCount==0?1:Math.ceil(paginationResponse.totalCount/paginationResponse.perPage);
    var html = '<ul class="pagination">';
    html += '<li class="'+(currentPage == 1?"disabled":"")+'" data-pb-page-number="1"><a href="#" class="first">&laquo;&laquo;</a></li>';
    html += '<li class="'+(currentPage == 1?"disabled":"")+'" data-pb-page-number="'+(currentPage==1?1:currentPage-1)+'"><a href="#" class="prev">&laquo;</a></li>';


    for (var i = 1; i <= lastPage; i++) {
         html += '<li class="'+(currentPage == i?"active":"")+'" data-pb-page-number="'+i+'"><a href="#" class="page">'+ i +'</a></li>';
    }

    html += '<li class="'+(lastPage == currentPage?"disabled":"")+'" data-pb-page-number="'+(currentPage==lastPage?lastPage:currentPage+1)+'"><a href="#" class="next">&raquo;</a></li>';
    html += '<li class="'+(lastPage == currentPage?"disabled":"")+'" data-pb-page-number="'+(lastPage)+'"><a href="#" class="last">&raquo;&raquo;</a></li>';

    html += '</ul>';
    return html;
},

Each list item has a data-pb-page-number attribute for later use

To make requests to other pages:

Within the View initialize function

this.el.on('click', 'ul.pagination li:not(.disabled,.active)', this.getCustomPagesPagination);

Here's the code for its implementation

getCustomPagesPagination: function (e) {
    e.preventDefault();
    var $el = $(e.target).closest("li");
    this.reloadCustomPages({pageNumber:$el.data("pb-page-number")})
},

The resulting layout will resemble this:

https://i.sstatic.net/2hsJ6.png

This explains how I resolved my issue, although the initial question remains unanswered

Answer 4

I successfully completed the task

within the View initialize function

Triggering the necessary action

this.reloadCustomPages();

Below is the code for its implementation

reloadCustomPages: function(options) {
    var self = this;
    self.block();
    self.customPages.fetch({data: $.param(options)}).always(function () {
        self.unblock();
    });
}

In the backend (using Java Spring), I made changes to the API to accommodate new query strings

@RequestParam(value = "pageNumber", defaultValue = "1"),
@RequestParam(value = "perPage", defaultValue = "10")

Instead of directly returning the list, it now includes pagination information like

Total number of items in the database
Current page number
Page size
And the items themselves

Here's a snippet from the server-side code for reference:

@RequestMapping(value = "/editor/pages", method = RequestMethod.GET)
public void listPages(@RequestParam(value = "pageNumber", defaultValue = "1") Integer pageNumber,
                          @RequestParam(value = "perPage", defaultValue = "10") Integer perPage,
                          HttpServletResponse httpResp) throws IOException {

    Long recordsTotal = pageSvc.findTotalNumberOfPages();// select count(*) from table_name    
    List<PbCustomPage> pages = pageSvc.findPages(pageNumber, perPage);// server side query that gets pagenated data 

    BackbonePaginatorResponse response = new BackbonePaginatorResponse();// I created this simple class 
    response.setTotalCount(recordsTotal);
    response.setPageNumber(pageNumber);
    response.setPerPage(perPage);
    response.setItems(pages);

    httpResp.setContentType("application/json");
    json.createCustomPageSerializer().addProperties().serialize(response, httpResp.getWriter());// just make your server send that object
}

The function call instructs the server to fetch page 1 with a page size of 10

In my template, I have included this piece of code

<div class="pagination clear" style="text-align: center;">
    <%= customPages.paginationHtml %>
</div>

This is how I populate it

customPages.paginationHtml = this.generatePagination(customPages);

Here's the crucial part:

generatePagination: function (paginationResponse) {
    var currentPage = paginationResponse.pageNumber,
        lastPage = paginationResponse.totalCount==0?1:Math.ceil(paginationResponse.totalCount/paginationResponse.perPage);
    var html = '<ul class="pagination">';
    html += '<li class="'+(currentPage == 1?"disabled":"")+'" data-pb-page-number="1"><a href="#" class="first">&laquo;&laquo;</a></li>';
    html += '<li class="'+(currentPage == 1?"disabled":"")+'" data-pb-page-number="'+(currentPage==1?1:currentPage-1)+'"><a href="#" class="prev">&laquo;</a></li>';


    for (var i = 1; i <= lastPage; i++) {
         html += '<li class="'+(currentPage == i?"active":"")+'" data-pb-page-number="'+i+'"><a href="#" class="page">'+ i +'</a></li>';
    }

    html += '<li class="'+(lastPage == currentPage?"disabled":"")+'" data-pb-page-number="'+(currentPage==lastPage?lastPage:currentPage+1)+'"><a href="#" class="next">&raquo;</a></li>';
    html += '<li class="'+(lastPage == currentPage?"disabled":"")+'" data-pb-page-number="'+(lastPage)+'"><a href="#" class="last">&raquo;&raquo;</a></li>';

    html += '</ul>';
    return html;
},

Each list item has a data-pb-page-number attribute for later use

To make requests to other pages:

Within the View initialize function

this.el.on('click', 'ul.pagination li:not(.disabled,.active)', this.getCustomPagesPagination);

Here's the code for its implementation

getCustomPagesPagination: function (e) {
    e.preventDefault();
    var $el = $(e.target).closest("li");
    this.reloadCustomPages({pageNumber:$el.data("pb-page-number")})
},

The resulting layout will resemble this:

https://i.sstatic.net/2hsJ6.png

This explains how I resolved my issue, although the initial question remains unanswered

Can this pagination task be accomplished without the use of backgrid?

Answer №1

Answer №2

Similar questions

Error message "$injector:unpr" occurs in the run method of AngularJS after minification process

Is there a way to streamline this query code that seems overly complex?

Visual traceroute, like the one on "yougetsignal.com", provides a way to update a div element either on demand or periodically

What is the best way to reference an ImageButton using jquery?

Improving the efficiency of checking roles in Discord.js

How to disable the underline styling for autocomplete in a React Material UI component

Can you provide a step-by-step guide on creating a JSONP Ajax request using only vanilla

Adding a React function to an external object without using React

How can we simplify this React component to reduce its verbosity?

Text that disappears upon clicking on show/hide按钮

Apologies, the system encountered an issue while trying to access the "name" property which was undefined. Fortunately, after refreshing the page, the error was successfully resolved

Searching for a specific word within a given string using a loop

How can I create a table using a loop and an onclick function for each <td>?

Looking to update the key name in a script that produces a list sorted in ascending order

Why is the last move of the previous player not displayed in this game of tic tac toe?

The toISOString() method is deducting a day from the specified value

Exploring AngularJS's Unique Features: Isolated Scope and Controller Connection

Angular JS | Sending information to two separate controllers when clicked

Button component in React remains visible until interacted with

Internet Explorer failing to trigger Ajax requests