i have sortable problem in jquey. In case of 1000 records, the page takes about 5 seconds to load.
Can it be optimized?
Ultimately, the database will have 4,000 records
<tbody class="row_position">
<?php
while($user = $users->fetch_assoc()){
?>
<tr id="<?php echo $user['id'] ?>">
<td><?php echo $user['id'] ?></td>
<td><?php echo $user['gid'] ?></td>
<td><?php echo $user['name'] ?></td>
</tr>
<?php
}
?>
</tbody>
<script type="text/javascript">
$(".row_position").sortable({
delay: 150,
stop: function() {
var selectedData = new Array();
$('.row_position>tr').each(function() {
selectedData.push($(this).attr("id"));
});
updateOrder(selectedData);
}
});
function updateOrder(data) {
$.ajax({
url:"ajaxPro.php",
type:'post',
data:{position:data},
success:function(data){
toastr.success('Your Change Successfully Saved.');
}
})
}
</script>
2
Answers
I found a solution. The problem was jQuery version 1.12.1 I changed to version 1.11.4 and it works fine.
This thread also describes how changing the jQuery version changes performance:
enter link description here
Your are doing it wrong.
Problems:
There are 2 solutions 1st one is Complex and 2nd is easy:
Solution 1:
Write your own jQuery which interact with PHP and get first 10, 20 or maximum 50 records. Add pagination so when you click on 2 tab in the pagination it will fetch next 10, 20 or maximum 50 record. You also have to write your own query to sort the table.
Solution 2:
Use Data Tables to handle these things also do it in server side processing I am mentioning links below which can help you.
https://www.youtube.com/watch?v=hCAMMB-2B2Q&ab_channel=PhpflowLabs
https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html