PHP/MySQL Show first X results, hide the rest - php

Question

Does anyone know how to bring in all of a mysql tables' results, only show the first X, (say 10), and then hide the rest using jquery? Basically, as I've already got the jquery, I just need to know how to show only the first X results in one div, then the rest in a seperate div.
My aim is to only show the first 10 results, but provide a link at the bottom of the page allowing the user to show all of the results. Was thinking the hyperlink could just re-execute the query but thought it would be easier to show/hide using jquery.
Many thanks in advance. S
Thought I'd add the code I'm using below
$query = "SELECT * FROM ispress WHERE active = '1' ORDER BY YEAR(date) DESC, MONTH(date) DESC LIMIT 0, 7";
$resultSet = mysql_query($query);
if (mysql_num_rows($resultSet))
{
$newsArray = array();
while ($newsResult = mysql_fetch_array($resultSet))
{
$newDate = $newsResult['date'] ;
$timePeriod = date('F Y ',strtotime($newDate));
$bFirstTime = true;
if (!isset($newsArray[$timePeriod]))
{
$newsArray[$timePeriod] = array();
}
$newsArray[$timePeriod][] = $newsResult;
}
foreach ($newsArray as $timePeriod => $newsItems)
{
echo '<div class="date">' . $timePeriod . '</div>' . PHP_EOL;
echo '<ul class="press">' . PHP_EOL;
foreach ($newsItems as $item)
{
if ($bFirstTime) {
echo '<li>';
echo '<img src="'.$wwwUrl.'images/news/'.$item['image'].'" width="'.$item['imgWidth'].'" height="'.$item['imgHeight'].'" title="'.$item['title'].'" alt="'.$item['title'].'" />
<h3>'.$item["title"].'</h3>
<p>'.substr($item['descrip'],0,244).'...</p>
<p>Read more</p>
';
echo '</li>' . PHP_EOL;
$bFirstTime = false;
} else {
echo '<li>';
echo '<img src="'.$wwwUrl.'images/news/'.$item['image'].'" width="'.$item['tnWidth'].'" height="'.$item['tnHeight'].'" title="'.$item['title'].'" alt="'.$item['title'].'" />
<h3>'.$item["title"].'</h3>
<p>'.substr($item['descrip'],0,100).'...</p>
<p>Read more</p>
';
echo '<div class="clear"></div>' . PHP_EOL;
echo '</li>' . PHP_EOL;
}
}
echo '</ul>' . PHP_EOL;
}
echo '<p>Older posts...</p>'. PHP_EOL;
echo '<div id="slickbox">This is the box that will be shown and display the rest of the news results. :)</div>'. PHP_EOL;
}
else
{
echo 'We currently have no press releases available';
}

Answer 1

This will hide the first 10 children. How are you planning on showing the other results? Buttons, fields, jqueryui widgets?
You will just need to add a click event which calls this function.
function limit_results(start, end) {
$('#things > .thing').each(index) {
if(index < end && index >= start) {
$(this).hide();
}
}
}
limit_results(1,10);

Answer 2

If you have your elements in a jQuery object already (say, $('#sql-results') holds all of your results), you can always do this: $('#sql-results:lt(10)') to work with the first ten elements, and $('#sql-results:gt(9)') to work with the rest of the elements.
You have to decide yourself how efficient your approach is for this amount of data you're processing.
Right, so for your specific markup structure, you can add this to your JS:
// Obviously this is untested and probably not bug-/typo-free
(
function($) {
var $slickbox = $('#slickbox').hide();
$('<ul></ul>')
.appendTo($slickbox)
.append('ul.press li:gt(9)');
$('#slick-toggle')
.bind(
'click',
function(){
$slickbox.toggle();
}
);
}
)(jQuery);

Answer 3

This would involve a lot of rewriting but jquery has a datatables plugin that will display the data. To use it you need to do something like
echo '<table id="news-table">'
echo '<thead>';//Datatables needs a thead with the correct number of columns. However you don't need to fill them in.
echo '<th>Date</th>';
echo '<th>Time Period</th>'
echo '</thead><tbody>';
while ($data = my_sql_fetch_array($result)) {
echo '<td>Whatever</td>';
echo '<td>Another Field</td>';
}
echo '</tbody></table>';
The jquery is then
$('#news-table').dataTable();
I'm not sure how it would do custom no data messages and I know that with the code you have written this may not be any good to you right now but I'm posting it because it could be useful for somebody looking for pagination info or for you if you want to do something similar again. Datatables is also useful because the user can choose the number of results they want to show, what column they want to sort by and what direction to sort in.

Answer 4

in your query
limit 0,10
for the rest
limit 11,xxx

Answer 5

When you print out each row's data count each iteration by incrementing a counter. When you get to 11 start a new div that has a different id to that of your 1st div that you already defined an id for. Now using jQuery you can hide and show the 2nd div with the remaining results as you please.

Answer 6

Divide the return values in your php file with a character
ex:
echo "this is first value +";
echo "this is second value +";
echo "this is third value +";
use javascript to separate the return values
ex:
var ajaxArray = ajaxValues.split("+");
now all three values are placed in ajaxArray and you may use anyone you want
ex:
ajaxArray[0] = this is first value