So I finally solved my pagination jquery datatable problem. But then new problems arised. It still loads the 1000 rows of data it's not following the number of data that I wanted. So I figured that it's throwing hidden variables on the server side such as the sEcho , iTotalRecords, iTotalDisplayRecords and etc.. What I did was to find a guide about it which is this. I studied article and tried to integrate it to mine.
Here's the integration:
for the controller
@RequestMapping(value = "populate/pull", method = RequestMethod.GET)
public void populatePull(HttpServletRequest request,
HttpServletResponse response) throws IOException {
JqueryDataTableModel param = DatatableParams.getParam(request);
String sEcho = param.sEcho;
int iTotalRecords=0; // total number of records (unfiltered)
int iTotalDisplayRecords; //value will be set when code filters companies by keyword
List<KspeakPull> pullList = pullServive.viewAllPull();
System.out.println("Viewing all");
iTotalDisplayRecords=pullList.size();
if(pullList.size()< param.iDisplayStart + param.iDisplayLength) {
pullList = pullList.subList(param.iDisplayStart, pullList.size());
} else {
pullList = pullList.subList(param.iDisplayStart, param.iDisplayStart + param.iDisplayLength);
}
Gson gson = new Gson();
JsonObject jsonResponse = new JsonObject();
jsonResponse.addProperty("sEcho", sEcho);
jsonResponse.addProperty("iTotalRecords", iTotalRecords);
jsonResponse.addProperty("iTotalDisplayRecords", iTotalDisplayRecords);
jsonResponse.add("aaData", gson.toJsonTree(pullList));
System.out.println(jsonResponse.toString());
response.setContentType("application/Json");
response.getWriter().print(jsonResponse.toString());
}
The jQuery table model copied this one from the guide, I'm wondering if this is the problem because he didn't use any getter/setter:
public class JqueryDataTableModel {
// / Request sequence number sent by DataTable, same value must be returned
// in response
public String sEcho;
// / Text used for filtering
public String sSearch;
// / Number of records that should be shown in table
public int iDisplayLength;
// / First record that should be shown(used for paging)
public int iDisplayStart;
// / Number of columns in table
public int iColumns;
// / Number of columns that are used in sorting
public int iSortingCols;
// / Index of the column that is used for sorting
public int iSortColumnIndex;
// / Sorting direction "asc" or "desc"
public String sSortDirection;
// / Comma separated list of column names
public String sColumns;
}
and the datatable params:
public class DatatableParams {
public static JqueryDataTableModel getParam(HttpServletRequest request) {
if (request.getParameter("sEcho") != null
&& request.getParameter("sEcho") != "") {
JqueryDataTableModel param = new JqueryDataTableModel();
param.sEcho = request.getParameter("sEcho");
param.sSearch = request.getParameter("sSearch");
param.sColumns = request.getParameter("sColumns");
param.iDisplayStart = Integer.parseInt(request
.getParameter("iDisplayStart"));
param.iDisplayLength = Integer.parseInt(request
.getParameter("iDisplayLength"));
param.iColumns = Integer.parseInt(request.getParameter("iColumns"));
param.iSortingCols = Integer.parseInt(request
.getParameter("iSortingCols"));
param.iSortColumnIndex = Integer.parseInt(request
.getParameter("iSortCol_0"));
param.sSortDirection = request.getParameter("sSortDir_0");
return param;
} else
return null;
}
}
Imported the following scripts in my JSP:
<script src="<c:url value='/resources/jquery-1.8.3.js'/>"></script>
<script src="<c:url value='/resources/bootstrap/js/jquery.dataTables.min.js'/>"></script>
<script src="<c:url value='/resources/bootstrap/js/pull-populate.js' />"></script>
<script src="<c:url value='/resources/bootstrap/js/bootstrap.min.js' />"></script>
and my ajax codes:
$(document).ready(function() {
$("#tablediv").hide();
$("#showTable").click(function(event){
$.get('populate/pull',function(responseJson) {
if(responseJson!=null){
$("#pulltable").DataTable({
"bServerSide": true,
"sAjaxSource": "populate/pull",
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"aoColumns": [
{ "mDataProp": "id" },
{ "mDataProp": "alias1" },
{ "mDataProp": "alias2" },
{ "mDataProp": "alias3" },
{ "mDataProp": "alias4" },
{ "mDataProp": "keyword" },
{ "mDataProp": "charNo" },
{ "mDataProp": "korWord" },
{ "mDataProp": "korCharNo" },
{ "mDataProp": "charTotal" },
] });
}
});
$("#tablediv").show();
}); });
When running it causes a NullPointerException on this line:
String sEcho = param.sEcho;
So, What am I missing here? Obviously it's not receiving the request.
