In Uncategorized

Source code: https://github.com/divanov11/Paginate-Search-JavaScript-Table-Dynamically-

Why use this method?

I found that for myself i prefer to display list of data using Ajax from Rest API’s I build. I wanted a more dynamic and universal way to display list of data and create search features and not be confined to a particular framework.

Solution 

My solution to this problem was to find a way to only call the list of items that needed to be displayed at that very moment and to paginate the rest. The only difference between my method and how i handled this before was that i didn’t need all the items to be loaded in order to display my list an paginate the rest.

Overview

  1. Define Variables
  2. Load Data
  3. Display List + Pagination
  4. Add Page Click Event Handler

Before we get started here is what our template looks like

Our Rest API sits in the app/api.

Flow Chart

Lets first start with adding some java script to our template

1 – Define Variables

We will start by defining 3 global varibles.

  • list – Will contain the data from our APIcall
  • page – The page number we are currently on in our data set
  • numberOfPages – Number of pages our data set will contain.

2 – Load Data

API Call

We will first create a function that will handle the request to our API. This function will take in a page number which will start at one when our page is first loaded. This will load in our first data and the number of pages we will have.

We will always send the current value of our form to our view via ajax. In the response we will add the posts to our list and set the numberOfPages variable.

The View

Our view will ask a question first. “Was a page number given?” If yes then we need to return the results that should only be on the requested page.

this file sits in app/api/view.py

 

3 -Display List + Pagination

No lets get to actually displaying our data! The drawList() function that gets called at the end of loadPosts() loops through our list and page count to display the data.

5 -Add Page Click Event Handler

Lets ad an “on click” event handler that will load in the selected page on every click.

No add the event handler.

The send result should look like this.

 

Source Code: https://github.com/divanov11/Paginate-Search-JavaScript-Table-Dynamically-

 

 

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.