Paginated tables with ajax calls to rest controller that collects data from mysql
Paginated tables with ajax calls to rest controller that collects data from mysql
arohit91
Posts: 7Questions: 1Answers: 0
Hi,
I have a html table in which i am filling the rows via an ajax call to the get method of REST controller. I have checked the examples but i could not find an example that works for my case. Currently datatables javascript does not detect my table rows since they are loaded by my ajax call. Can anyone help me paginate my table?
HTML CODE (with ajax calls):
<!DOCTYPE html>
<html>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900"
rel="stylesheet" type="text/css">
<link href="assets/css/icons/icomoon/styles.css" rel="stylesheet"
type="text/css">
<link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="assets/css/core.css" rel="stylesheet" type="text/css">
<link href="assets/css/components.css" rel="stylesheet" type="text/css">
<link href="assets/css/colors.css" rel="stylesheet" type="text/css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css"
href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<title>Test</title>
<head>TEST TABLE:
</head>
<br>
<br>
<body>
<table id="customers1" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Product_id</th>
<th>Price</th>
<th>Discount</th>
<th>Name</th>
<th>City</th>
<th>State</th>
</tr>
</thead>
</table>
<script>
var list = [];
$.ajax({
type : 'GET',
url : "/api/v1/table",
dataType : "json",
data : {},
success : function(data) {
// Autoscrolling
console.log('success', data);
var $table = $('#customers');
list = data;
var row = '<tbody>';
var n = list.length;
for (var i = 0; i < n; i++) {
var row = row + "<tbody><tr><td>" + list[i].product_id
+ "</td><td>" + list[i].price + "</td><td>"
+ list[i].discount + "</td><td>" + list[i].name
+ "</td><td>" + list[i].city + "</td><td>"
+ list[i].state + "</td></tr>";
}
row = row + "</tbody>";
$('#customers1').append(row);
},
error : function(exception) {
alert('Exeption:' + exception);
}
});
</script>
<script>
$(document).ready(function() {
$('#customers1').DataTable({
"pagingType" : "full_numbers"
});
});
</script>
</body>
</html>
REST Controller:
import java.util.List;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("api/v1/")
public class TableController {
@RequestMapping(value="table",method = RequestMethod.GET, produces="application/json")
public List<TableModel> getTable() {
TableDAO dao = new TableDAO();
List<TableModel> tableData = dao.loadTableData();
return tableData;
}
This question has an accepted answers - jump to answer
Answers
My guess is that Datatables is being initialized before the AJAX call completes and the data is written into the HTM table. A couple things I would try are:
rows().invalidate()once the table is ready to cause DT to re-read the table.Kevin
Thanks for the help. The first approach worked for me