{"id":2755,"date":"2017-04-29T08:38:03","date_gmt":"2017-04-29T08:38:03","guid":{"rendered":"http:\/\/www.mobisoftinfotech.com\/blog\/?p=2755"},"modified":"2024-08-21T17:05:34","modified_gmt":"2024-08-21T11:35:34","slug":"jquery-datatable-ajax-tutorial-with-example-project","status":"publish","type":"post","link":"https:\/\/mobisoftinfotech.com\/resources\/blog\/web-programming\/jquery-datatable-ajax-tutorial-with-example-project","title":{"rendered":"jQuery Datatable Ajax Tutorial With Example Project"},"content":{"rendered":"

Introduction<\/strong><\/h3>\n

Hi,
\nThe goal of this blog is to show how you can implement fully functional, high-performance tables using the jQuery DataTables plug-in<\/a>.<\/p>\n

Basically, There are many ways to get your data into DataTables, and if you are working with large databases, you might want to consider using the server-side options that DataTables provides. Basically all of the filtering, paging, sorting, changing page length, etc. and DataTables is just an event and display module. The preferred two ways for JQuery Datatable<\/a> processing are Client-side processing<\/strong> and Server-side processing<\/strong>. This is a JavaScript plug-in implemented using the jQuery library that handles all the necessary interaction with the user on the client-side. So, Here I came up with a blog for jQuery Datatable as I really liked this control. This article shows how the jQuery DataTables plug-in<\/a> can be integrated into Java web applications.<\/p>\n

This sample shows how you can generate a table of students and add the jQuery DataTables plug-in<\/a> to the HTML table. In that case, Everything is implemented using JavaScript functionalities so you do not need to do anything else. The only thing you need to do is generate a plain table as in the initial case. The new, enhanced table is shown in the following figure:<\/p>\n

Using the code<\/strong><\/h3>\n

This sample shows how you can generate a table of Students and add the jQuery DataTables plug-in to the HTML table. The code is logically organized in the MVC structure:<\/p>\n

1. Model represents classes that contain data and that will be shown in the browser.
\n2. View are pages that are used to show data to the client \u2013 in this example, a JSP and a plain HTML page are used as views.
\n3. Controller is the logic of the application and represents servlets that handle web requests and utility functions.<\/p>\n

There is also one utility package containing classes transforming Java objects into JSON (this is required because the jQuery DataTables plug-in communicates with server-side code via JSON objects but not required for client-side) and We are using it with both Client-side and Server-side.<\/p>\n

The Model is a Student class that contains the following properties:
\n1. Id of the Student
\n2. Name of the Student
\n3. Gender
\n4. Address
\n5. Grade<\/p>\n

In this example, I have used a MYSQL Database named MyDB(for create command of database and student table I have attached studentDB.sql file. Please use this file for creation of database and student table), so I have used class called StudentModel (POJO) that contains a setter-getter for above student parameters as follows :<\/p>\n

StudentModel.java<\/strong>
\n\n\n<\/p>

package com;\n\npublic class StudentModel {\n\nprivate long sttudentId;\n\nprivate String firstName;\n\nprivate String lastName;\n\nprivate String address;\n\nprivate String gender;\n\nprivate String grade;\n\npublic long getSttudentId() {\nreturn sttudentId;\n}\n\npublic void setSttudentId(long sttudentId) {\nthis.sttudentId = sttudentId;\n}\n\npublic String getFirstName() {\n\nreturn firstName;\n}\n\npublic void setFirstName(String firstName) {\nthis.firstName = firstName;\n}\n\npublic String getLastName() {\nreturn lastName;\n}\n\npublic void setLastName(String lastName) {\nthis.lastName = lastName;\n}\n\npublic String getAddress() {\nreturn address;\n}\n\npublic void setAddress(String address) {\nthis.address = address;\n}\n\npublic String getGender() {\nreturn gender;\n}\n\npublic void setGender(String gender) {\nthis.gender = gender;\n}\n\npublic String getGrade() {\nreturn grade;\n}\n\npublic void setGrade(String grade) {\nthis.grade = grade;\n}\n\n}\n<\/pre>\n\n\n\n
The following sections are presented with two major cases of usage of DataTables in Java web applications.<\/p>\n
A) Client side processing mode ( Default usage )<\/strong><\/h3>\n
In this default mode, a minimum amount of code is required \u2013 the web server can generate a plain HTML table in standard format. The client-side JavaScript component will use whatever gets generated and add client-side functionalities. In this client-side mode, DataTables takes all the table rows from the<\/p>\n
<tbody><\/tbody><\/pre>\n
section and performs filtering, paging, and sorting directly on these elements as with in-memory objects. This is the fastest way to use DataTables, but it requires that the server returns all data in a single call, loads all these rows as in-memory JavaScript objects, and renders them dynamically in DOM. This might cause performance issues with the server call, and memory usage on the client. However, this minimizes the number of requests sent to the server because once the table is loaded, the server is not used at all.<\/p>\n
This is the small code I have Generated for Jquery Datatable to be implememted:<\/p>\n
1) table-demo.js<\/strong>
\n\n\n<\/p>
var studentTable;\n\njQuery(document).ready(function() {\n\nstudentTable = jQuery(&#039;#studentListTable&#039;).dataTable({\n\"bJQueryUI\" : true,\n\"sPaginationType\" : \"full_numbers\",\n\"bRetrieve\" : true,\n\"bFilter\" : true,\n\"iDisplayLength\": 10,\n\"bProcessing\" : true,\n\"bServerSide\" : false,\n\"aoColumns\" : [ { \"bSearchable\" : false,\"bVisible\" : false,\n\"asSorting\" : [ \"asc\" ] },\n{\"sWidth\" : \"20%\",\"bSortable\" : true },\n{\"sWidth\" : \"20%\",\"bSortable\" : true },\n{\"sWidth\" : \"20%\",\"bSortable\" : true },\n{\"sWidth\" : \"20%\",\"bSortable\" : true },\n{\"sWidth\" : \"20%\",\"bSortable\" : true }\n]\n});\n\njQuery(\".ui-corner-br\").addClass(&#039;ui-widget-header_custom &#039;);\n});\n\n<\/pre>\n\n\n\n
In the document-ready JavaScript event handler, the plain generated table is enhanced with the jQuery DataTables plug-in. There are parameters that are passed to the plug-in initialization function (these are parameters I always use):<\/p>\n
1. sPagination- Instructing the plug-in to generate pagination with numbers instead of two previous-next buttons, as is generated by default.
\n2. bJQueryUI- Applying standard jQueryUI styles.
\n3. sajaxSource- You can instruct DataTables to load data from an external source using this parameter (use aData if you want to pass data in you already have). Simply provide a url a JSON object can be obtained from. This object must include the parameter ‘aaData’ which is the data source for the table.
\n4. bRetrieve- Retrieve the DataTables object for the given selector.
\n5. bProcessing- Enable or disable the display of a ‘processing’ indicator when the table is being processed .
\n6. bServerSide- Configure DataTables to use server-side processing. Note that the sAjaxSource parameter must also be given in order to give DataTables a source to obtain the required data for each draw.
\n7. aoColumns- This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in the array.
\n8. bsortable- Enable or disable sorting on this column.
\n9. sWidth- Defining the width of the column.
\n10. bSearchable- Enable or Disable filtering on the data in this column.
\n11. bVisible- Enable or Disable the display of this column.
\n12. asSorting- You can control the default sorting direction, and even alter the behaviour of the sort handler(i.e. Only aloow ascending sort etc. ) using this parameter.<\/p>\n
As mentioned above, the jQuery DataTables plug-in can be applied on a static HTML structure in the browser. I have generated a table structure using a JSP page to make a call to above table-demo.js shown in the listing below:<\/p>\n
2) table-demo.jsp<\/strong><\/p>\n
\n\n<\/p>
<%@ page\nimport=\"com.*,java.util.*\"%><!DOCTYPE html>\n<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n<script type=\"text\/javascript\">\nvar basePath = &#039;${pageContext.request.contextPath}&#039;;\n<\/script>\n<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"${pageContext.request.contextPath}\/assets\/datatable\/css\/demo_table_jui.css\" >\n<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"${pageContext.request.contextPath}\/assets\/jquery-ui\/css\/redmond\/jquery-ui-1.8.11.custom.css\" >\n<script type=\"text\/javascript\" src=\"${pageContext.request.contextPath}\/assets\/js\/jquery-1.5.2.min.js\" ><\/script>\n<script type=\"text\/javascript\" src=\"${pageContext.request.contextPath}\/assets\/js\/jquery-ajax-form-plugin\/jquery.form.js\" ><\/script>\n<script type=\"text\/javascript\" src=\"${pageContext.request.contextPath}\/assets\/datatable\/jquery.dataTables.min.js\"><\/script>\n<script type=\"text\/javascript\" src=\"${pageContext.request.contextPath}\/assets\/jquery-ui\/js\/jquery-ui-1.8.11.custom.min.js\" ><\/script>\n\n<script type=\"text\/javascript\" src=\"${pageContext.request.contextPath}\/assets\/js\/table-demo.js\"><\/script>\n\n<title>Student Form<\/title>\n<\/head>\n<body>\n<form>\n<div class=\"titleDiv\">Student List<\/div>\n<div class=\"clearfix\"><\/div>\n<div class=\"formDiv\">\n<table border=\"0\" margin=\"0\" padding=\"0\" width=\"100%\"\nclass=\"dataTables_wrapper\" id=\"studentListTable\">\n<thead>\n<tr>\n<th>Id<\/th>\n<th>First Name<\/th>\n<th>Last Name<\/th>\n<th>Gender<\/th>\n<th>Address<\/th>\n<th>Grade<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<%\nif(request.getAttribute(\"studentList\") != null){\nList<StudentModel> studentList = (List<StudentModel>)\nrequest.getAttribute(\"studentList\");\n%>\n<%\nif( studentList != null ){\nfor (StudentModel student: studentList){\n%>\n<tr>\n<td><%=student.getSttudentId()%><\/td>\n<td><%=student.getFirstName()%><\/td>\n<td><%=student.getLastName()%><\/td>\n<td><%=student.getGender()%><\/td>\n<td><%=student.getAddress()%><\/td>\n<td><%=student.getGrade()%><\/td>\n\n<\/tr>\n<%}\n}\n\n}%>\n\n<\/tbody>\n<\/table>\n<\/div>\n<\/form>\n<\/body>\n<\/html>\n\n<\/pre>\n\n\n\n
In this JSP page is included all the necessary JavaScript libraries, and HTML code for the student table is generated. For demonstration purposes, a simple loop generates a TR for each student that is returned by the TableDemoAction class. However, in your applications, you can use any server-side processing you want (JavaBeans, JSTL components, etc.) because the jQuery DataTables plug-in is independent of the applied server-side technology.<\/p>\n
This is my action (controller) class called TableDemoAction which make a call to list of students which in turn returns the list of students. Also forword request to JSP page table-demo.jsp.<\/p>\n
3) TableDemoAction.java<\/strong>
\n\n\n<\/p>
package com;\n\nimport java.io.IOException;\nimport java.sql.Connection;\nimport java.sql.DriverManager;\nimport java.sql.ResultSet;\nimport java.sql.SQLException;\nimport java.sql.Statement;\nimport java.util.ArrayList;\nimport java.util.List;\n\nimport javax.servlet.RequestDispatcher;\nimport javax.servlet.ServletException;\nimport javax.servlet.http.HttpServlet;\nimport javax.servlet.http.HttpServletRequest;\nimport javax.servlet.http.HttpServletResponse;\n\n@SuppressWarnings(\"serial\")\npublic class TableDemoAction extends HttpServlet {\n\nprivate String STUDENT_ID_LIST = \"studentList\";\n\npublic void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {\n\nList<StudentModel> studentList = null;\ntry {\nstudentList = selectStudentInfo();\n} catch (SQLException e) {\ne.printStackTrace();\n}\n\nString destination = \"\/WEB-INF\/views\/com\/table-demo.jsp\";\nrequest.setAttribute(STUDENT_ID_LIST, studentList);\n\nRequestDispatcher rd = request.getRequestDispatcher(destination);\nrd.forward(request, response);\n\n}\n\npublic List<StudentModel> selectStudentInfo() throws SQLException {\n\nList<StudentModel> al = new ArrayList<StudentModel>();\n\n\/\/ @formatter:off\n\nString query =\n\n\" SELECT id,firstName,lastName,gender,address,grade \" +\n\n\" FROM \" +\n\n\" student \" +\n\n\" order by id asc \";\n\n\/\/ @formatter:on\nString connectionURL = \"jdbc:mysql:\/\/localhost:3306\/MyDB?\nuser=root&password=mobisoft\";\ntry {\nClass.forName(\"com.mysql.jdbc.Driver\");\n} catch (ClassNotFoundException e) {\ne.printStackTrace();\n}\n\nConnection connection = DriverManager.getConnection(connectionURL);\nStatement statement = connection.createStatement();\nResultSet resultSet = statement.executeQuery(query);\n\nwhile (resultSet.next()) {\n\nStudentModel student = new StudentModel();\nstudent.setSttudentId(resultSet.getLong(\"id\"));\nstudent.setFirstName(resultSet.getString(\"firstName\"));\nstudent.setLastName(resultSet.getString(\"lastName\"));\nstudent.setGender(resultSet.getString(\"gender\"));\nstudent.setAddress(resultSet.getString(\"address\"));\nstudent.setGrade(resultSet.getString(\"grade\"));\n\nal.add(student);\n}\n\nresultSet.close();\nstatement.close();\n\nreturn al;\n\n}\n\n}\n\n<\/pre>\n\n\n\n
Instead of the plain HTML table, the following component is shown on the client side:<\/p>\n
All actions you see in the component are implemented on the client-side (e.g., when you enter text in the text box, TR elements are filtered). This is the fastest way for the user, under the assumption that the time required to load the table is not too big. If you have a huge amount of data, you might consider using DataTables in AJAX mode where only partial results are returned to the plug-in.<\/p>\n
You can see a complete list of additional DataTable plugins on the DataTables site. All these plug-ins are additional add-ons for DataTables, but you can also use the powerful DataTables API to customize behavior. An example of the plain table enhanced with a few mentioned plugins is shown in the following figure:<\/p>\n
If you have a reasonable amount of records in the table you do not need to worry about these functionalities. Just render a plain table and apply some combination of plug-ins that you need.<\/p>\n
However, if you have a lot of records that are shown in the table and you want to avoid complex JavaScript processing in the browser, you can implement the processing logic on the server-side (e.g., in some servlet), and setup DataTables to query the server via AJAX calls in order to take information that should be displayed. This mode is described in the following section.<\/p>\n
do my essay for me free<\/a>