How to add jQuery box on div

Question

I have created some sets of div blocks with MySQL and PHP.

I created the blocks with this code:

while($row = mysqli_fetch_array($result)) { 
  echo "<div>".$row['chanelname'].$row['chaneldescription']."</div>"; 
}

Now I wonder what will happen if the in my database store thousands of channel list. Then the div will increase. Now I want to load all the divs and show 10 divs in one time. I want to put the divs in a JQuery box like below. I want to have JQuery pagination on my div collection. pagination example

Look at [this](http://stackoverflow.com/questions/3705318/simple-php-pagination) question about pagination. Answer by Nev Stokes. — Milan and Friends, Jul 22 '14 at 20:44
You could use [Datatables](http://www.datatables.net/) plugin. — John, Jul 25 '14 at 05:49

score 0 · Answer 1 · answered Jul 23 '14 at 01:07

Pagination is a common subject and this can be solved by either adding logic to the PHP/MySQL, adding logic to the Javascript/jQuery, or a combination of the two. I'm sure there are several reasons dependent on situation and what is trying to be achieved so I will just present a simplified version of a possible Javascript/jQuery solution without plugins. I'm sure there are several jQuery plugins for pagination out there as well.

I would start by adding identifiers to your div so we can get a good selector with jQuery for your divs.

<div class="channel_block">...</div>

This would allow us to select all of these elements and preform a slice operation to obtain our desired div elements

$channels = $(".channel_block").slice(start, start+limit);

This should be enough information to handle the information set that you are looking for and the rest can be modified based on the stylization that you are looking for. In my example I simply added a hiding class to all of the irrelevant channel_blocks and removed that class from our relevant set.

I attached a fiddle that elaborates on this example. The important function being the T.showSet()

http://jsfiddle.net/B86w9/1/

score 0 · Answer 2 · answered Jul 25 '14 at 06:05

Simple Pagination is a good plugin for this.

You have to include the plugin!

<script type="text/javascript" src="path_to/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.simplePagination.js"></script>
<link type="text/css" rel="stylesheet" href="path_to/simplePagination.css"/>

and call the pagination.

$(function() {
    $(selector).pagination({
        items: 100,
        itemsOnPage: 10,
        cssStyle: 'light-theme'
    });
});

but for search functionality you have to call Ajax to php and return the results.

Hope its useful!

How to add jQuery box on div

2 Answers2