I'm working on a website and am pulling category names from a db table (category_names). I then display them on the website using php on to an html unordered list. I want to limit the number of category_names and then using jquery(or anything else but I prefer jQuery) retrieve more category_names and add a less button to go back.

I hope I made this question easy to understand, and thank you for any help!

I'm working on a website and am pulling category names from a db table (category_names). I then display them on the website using php on to an html unordered list. I want to limit the number of category_names and then using jquery(or anything else but I prefer jQuery) retrieve more category_names and add a less button to go back.

I hope I made this question easy to understand, and thank you for any help!

• php
• javascript
• jquery
• mysql
• web

4 Answers 4

Basically use AJAX to pull in more. Start off by loading in a few by using LIMIT.

<ul id="categories">
<?php
    $res = mysql_query('SELECT * FROM `category_names` LIMIT 10'); // change limit to suit
    while ($row = mysql_fetch_array($res)) {
        echo '<li>'.$row['name'].'</li>'; // or whatever your field is called
    }
?>
</ul>
<span id="loadmore" num_loaded="10">Load More</span>

Then use the following jQuery to load more:

$('#loadmore').click(function() {
    var loaded = $(this).attr('num_loaded');
    $.ajax({
        url:'load_categories.php',
        type:'get',
        data:{'from':loaded,'to':loaded+10},
        success: function (res) {
            var categories = $.parseJSON(res);
            categories.each(function() {
                $('#categories').append('<ul>'+this+'</ul>');
            });
            $('#loadmore').attr('num_loaded',loaded+10);
        }
    });
});

Finally you'll need to create the PHP page that the AJAX calls - load_categories.php

<?php

if (!isset($_GET['from'])) exit;
if (!isset($_GET['to'])) exit;

$from = $_GET['from'];
$to = $_GET['to'];
$diff = $from-$to;

// connect / select db
$res = mysql_query('SELECT * FROM `category_names` LIMIT '.$from-1.','.$to.';');
$arr = array();
while ($row = mysql_fetch_array($res)) {
    array_push($arr,$row['name']);
}
echo json_encode($arr);

?>  

There are a number of different approaches that work better or worse depending upon your needs.

Approach 1 (simpler, less efficient, scales poorly): execute the full query, and store all of the results on the DOM, just hiding them using jQuery (jQuery expander is a simple plugin you may want to try out, though I have found it limiting in customization).

Approach 2 (more complicated, but more efficient/scalable, also faster): Use MySQL limit, you can actually send a second mysql request on click, however, you would want to make sure this is asynchronous so as to not delay the user's interactions. http://php.about.com/od/mysqlcommands/g/Limit_sql.htm

This is similar to: PHP/MySQL Show first X results, hide the rest

Or you could do something simpler:

 $get = mysqli_queury ($link, "SELECT * FROM db_name WHERE blank='blank' LIMIT 5"
 if (isset($_POST['button']; {
 $get = mysqli_query ($link, "SELECT * FROM db_name WHERE blank='blank' LIMIT 10"
 }
?>
<form action="showmore.php" method="POSt">
<input type="button" id="button" name="button">
</form>

Hope that helps!

Use a datagrid with pagenation. I think datatable JQuery pluggin will work well for you