Hello I am using jquery to query my data back to my index.gsp files and I am not sure how to implement pagination with it. Down below will be a working code but without the pagination. Since I used jquery to query the data back I cannot use grails paginate. Is there any other solution that I can implement the pagination. Here is my controller code to get the data from the database:
def index() {
def customers=Customer.findAll()
def cuscount=Customer.count
render view: 'index', model: [cus:customers,customerCount:cuscount,searchQuery: '']
}
and here is my index.gsp page:
<body>
<div class="boxed">
<h3>Social Integration</h3>
</div>
<div class = "container">
<div id="list-customer">
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<div class = "row">
<div class = "col-sm-6">
<input id = "search" class= "form-control" onkeyup="getSearchRequest()" value="${searchQuery==null?'':searchQuery}" name = "search" type="text" placeholder="Search" aria-label="Search">
</div>
<div class = "col-sm-6">
<g:link action="createCustomer"><button id = "add" class="btn btn-primary"><i id = "addicon" class="fa fa-plus" aria-hidden="true"></i>Add Customer</button></g:link>
</div>
</div>
<table class="table table-bordered" id = "table">
<colgroup>
<col style="width:10%">
<col style="width:25%">
<col style="width:20%">
<col style="width:25%">
<col style="width:25%">
</colgroup>
<thead>
<tr>
<td style = column-width:10px;>Number</td>
<td>Name</td>
<td>Code</td>
<td>Contact person</td>
<td>Status</td>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
</div>
</div>
<script>
function getSearchRequest() {
$.ajax({
url : '${createLink(action:'searchCustomerJSON')}',
type : 'GET',
data : {
'search' : $('#search').val(),
},
dataType:'json',
success : function(data) {
var tableHtml='';
var i=1;
for(index in data)
{
var tableData=data[index];
var id=tableData.id;
var code=tableData.code;
var contactPerson=tableData.contactPerson;
var status=tableData.status;
var name=tableData.name;
tableHtml+='<tr>' +
'<td>'+i+'</td>' +
'<td><a href="${createLink(action: 'showCustomerById')}/'+id+'">'+name+'</a></td>' +
'<td>'+code+'</td>' +
'<td>'+contactPerson+'</td>' +
'<td>'+status+'</td></tr>';
i++;
}
$('#tableBody').html(tableHtml);
},
error : function(request,error)
{
alert("Request: "+JSON.stringify(request));
}
});
}
getSearchRequest();
</script>
</body>
Can anyone please help me how can I implement jquery pagination with it? Many thanks.
Are you looking for a pagination library? There are many, try searching for something like "jQuery pagination"... here's a sample: https://pagination.js.org/
This uses fully client-side pagination, which may not be feasible depending on the size of your data set. Your code is loading every
Customerin the database and sending that data to the browser. If this is more than just a sample set of data, you will run into issues. Consider server-side pagination instead.