PLATFORM:
PHP, mySQL & jQuery
WHAT I HAVE:
I have a Database table. Within my application, I am able to fetch all the rows. When I am querying the database, I have set the records fetch limit as 30, but that can be changed via a dropdown list. So consider that I am fetching upto 30 rows of data in a single query and displaying them. I am populating this data in table (rows). I have checkbox next to every record and a Delete button. When the Delete button is clicked, all the rows that are checked, will get deleted.
WHAT I AM TRYING TO DO:
For every row that I delete, I am trying to update the current view with the next set of rows, till the fetch row limit is met. Confusing? Here's an example:
EXAMPLE:
Consider that I 1000 rows in my table & I have set the records fetch limit as 30, which means that upto 30 records will be shown at one time. I can use pagination to navigate to the other records. Now in my view, I have 30 rows of data in the table. I selected 5 rows and deleted them via jQuery. Upon deletion, I am able to remove the deleted rows from view. So in this case, since I deleted 5 rows, I am able to remove them and now my view shows me only 25 rows (which is correct). Since there are 995 rows remaining still in my table and as I have a record fetch limit of 30, now I want this to work in such a way that I show the next 5 records automatically. I want the existing entries to move up and the new entries to populate at the bottom.
In other words, as long as sufficient rows exist, I want to populate my view with the same number of records, as many were deleted. So if I delete 10 records, I want the next 10 records to be fetched and displayed automatically again making it a total count of 30 rows of data, that are displayed. If 20 records are deleted, then I want next 20 records to be fetched and displayed automatically( again making it a total count of 30 rows of data, that are displayed). I want to do this with an effect attached to it, so that i can visually note that new rows has appeared. Maybe a slideup or fadein+slideup effect can be applied? Hope I make sense.
WHAT I NEED:
I need the PHP & jQuery code to be able to achieve the above effect/functionality. Thanks in advance.
Here's a bit of my jQuery code (if that helps):
$('#button_delete').click(function() {
$.ajax({
type: 'POST',
cache: false,
url: 'test.php',
data: $('#form1').serialize(),
dataType: 'json',
success: function(data) {
if(data.success === 1)
{
$.each(data.id, function (index, value) {
$('#'+value).remove();
});
jQuery.each(data.new_rows_data, function(i, val)
{
jQuery.each(val, function(i, new_val)
{
$('#table').append('<tr id='+new_val+'>'+
'<td></td>'+
'<td></td>'+
'<td>'+new_val+'</td>'+
'</tr>');
});
});
}
}
})
return false;
});
PHP code:
<?php
$from = 0;
$limit = 30;
$result = mysql_query( "SELECT * FROM mytable ORDER BY m_id ASC LIMIT $from, $limit" );
?>
<table>
<tr>
<td>ID</td>
<td>Content</td>
</tr>
<?php
while( $rows = mysql_fetch_array($result) )
{
?>
<tr id=<?php echo $rows['m_id']; ?>>
<td><?php echo $rows['m_id']; ?></td>
<td><?php echo $rows['content']; ?></td>
</tr>
<?php
}
?>
</table>
test.php
//test.php
<?php
$id = $_POST['id'];
if( is_array( $id ) )
{
$arr_size = sizeof( $id );
foreach ( $id as $value )
{
$sql = "DELETE FROM mytable WHERE id = ".(int)$value." LIMIT 1";
$result = mysql_query($sql);
}
if( $result )
{
$success = 1;
$message = 'Deleted';
}
else
{
$success = 0;
$message = 'Unable to DELETE FROM DB.';
}
}
$last_id = 500;
for($i=1; $i <= $arr_size; $i++)
{
$new_value = ($last_id + $i);
$new_rows[] .= $new_value;
$res = mysql_query("SELECT id, message, date
FROM mytable WHERE id = ".(int)$new_value." "); //LIMIT 1
$row = mysql_fetch_array($res);
$new_rows_data['row']['id'] .= $row['id'];
$new_rows_data['row']['message'] .= $row['message'];
$new_rows_data['row']['date'] .= $row['date'];
}
print json_encode(array('success' => $success, 'message' => $message, 'id' => $id, 'new_rows' => $new_rows,
'new_rows_data' => $new_rows_data));
?>
