Two datatables in one page with custom JS files

saikris12

Hi,

I need to have two datatables in the same JSP page. There is lot of customization involved.
So We made 2 custom dataTables js files. One for the first table and another for the second. These two JS have been linked to 2 different JSP pages which are then included to the parent JSP.

The problem is my first table loads fine..But during the second table load, it still refers to the JS of the first table. How to get the second datatable to refer to its own datatable JS?

jr42.gordon

Do you mean two DataTables js files that you downloaded from this website? Or two custom js files that support your DataTables?

allan

DataTables fully supports multiple tables on a single page.

Allan

saikris12

Gordon,
Yes. We downloaded the datatables JS files and customized it as per our need.

Allan,
I already referred to the link you provided. But that does not answer my question. My problem is with the loading of the correct JS file. I have 2 JSPs and 2 JS files. How can I tell the JSP to use the datatable in particular JS file.

allan

I'm afraid I don't understand the issue - can you elaborate on it please and provide a link to the page that you are having problems with.

Thanks,
Allan

saikris12

Hi Allan,

Sure. I have 2 JSP fragments files which are included in the base JSP. These 2 JSP fragments have 2 datatables and their own datatables js files.

reportDetails.jspf :
<link rel="stylesheet" href="<%=request.getContextPath()%>/service/js/isc-style.css" /> <link rel="stylesheet" href="<%=request.getContextPath()%>/service/js/irreports.css" /> <script type="text/javascript" language="javascript" src="<%=request.getContextPath()%>/service/js/jquery/plugins/datatable/irreports.jquery.dataTables.js"></script>

recipients.jspf :

<style type="text/css" title="currentStyle"> @import "service/js/DataTables-1.9.4/media/css/demo_table_jui.css"; </style> <script type="text/javascript" language="javascript" src="<%=request.getContextPath()%>/service/js/jquery/plugins/datatable/recipients.jquery.dataTables.js"></script>

These 2 JSPfs are included in the base JSP

<%@ include file="jspf/reportDetails.jspf" %> <%@ include file="jspf/recipients.jspf" %>

Only the first JS file is being loaded and even when loading the datatable in recipients.jspf the call is being made to the first JS (irreports.jquery.dataTables.js). I have declared a custom pagination type in each JS file :

In irreports.jquery.dataTables.js : sPaginationType : "irreports"
In recipients.jquery.dataTables.js : sPaginationType : "full_numbers"

As its only loading the first JS its trying to find the full_numbers type in it. Its not searching for that in the second JS.

allan

I'm afraid I know nothing about JSP - can you show me the rendered HTML for the page (i.e. View source) or link to the page please.

Thanks,
Allan

jr42.gordon

Honestly I don't feel like you should, nor need to, include multiple DataTables library files. The differences between the tables should be made within the configs of each .DataTable()

jr42.gordon

@allan

A JSPF is reusable "fragment" HTML and Java code for use within JSP files. A JSP is your main HTML file with JSPF being snippet HTML files that are included, sort of like templates.

saikris12

@jr42.gordon

You are right Gordon. Finally I was able to do what I needed within one Jquery JS. I had to some conditional coding depending on the table ID. The code looks clumsy but does what it ought to do. Thanks for the help.