Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82458

delete row in table

$
0
0
I have a table that is built on page load so just a typical DOM data source. My table also has a form with checkboxes so someone can delete a row:
<form id="deleteform" name="myform" action="">
<table id="webcam-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>...</th>
            <th><input type="checkbox" name="checkboxselectall" title="Select All" />&nbsp;&nbsp;
                <button type="submit" class="deletebutton" name="delete_video" title="Delete the selected videos">Delete</button></th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>some data</td>
            ...
            <td><input type="checkbox" value="<?php echo $this->result_videos[$i]["video_name"]; ?>" title="Mark this video for deletion"/></td>
        </tr>
    </tbody>
</table>
</form>


Just building the table is easy:

	jQuery('#webcam-table').dataTable({
		"sPaginationType": "full_numbers",
		"bStateSave": true,
		"aaSorting": [[1,"desc"]],
		"aoColumnDefs": [
		  { "bSortable": false, "aTargets": [ 4 ] }
		]
	});

I've now added an AJAX implementation to delete the row:

	jQuery(".deletebutton").on("click", function(e) {
		e.preventDefault(); //cancel click event on start
		var testchecked = jQuery(':checkbox:checked').length;
        if (testchecked == 0) {
            alert('Please select at least one video');
            e.preventDefault();
        }
        else
        {
			if (confirm("Are you sure you want to delete the selected videos?"))
			{
				var checked = jQuery('input:checkbox:checked').map(function () {
					return this.value;
				}).get();
				var $this = jQuery(this);
				jQuery.ajax({
					type: 'POST',
					url: 'index.php?option=com_recordings&task=deletevideos&format=raw',
					data: {checkedarray:checked},
					success: function(data){

					    jQuery('#deleteform input:checkbox').each(function(){
					        if(this.checked){
					        	jQuery('input:checkbox:checked').parents("tr").remove();
					        }
					    });
					}
				});
			}
        }
	});

If I do this it removes the row in the table but with pagination showing 10 rows it removes one of them leaving 9. I need to refresh this somehow and wasn't clear what is the best way to achieve this? I can refresh the page but that would defeat the point of doing this AJAX implementation. Any advice would be appreciated.

Viewing all articles
Browse latest Browse all 82458

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>