Buttons and Data Will not Show With Editor Script
Buttons and Data Will not Show With Editor Script
macksigep
Posts: 6Questions: 3Answers: 0
I am at my end with trying to get buttons!
I have realized that to get buttons on my rows I need the editor.
However:
Problem #1: Anytime I include button script, my data will not render, other than that my rows populate.
Problem #2: When I include my Editor, the buttons still do not show on the rows, AND with the Editor
library <script> link it takes the page FOREVER to load, and still does not show anything on my rows.
Question #1 How do I get buttons to show using Editor?
Question #2 How do I use the Editor without taking so long to load?
Question #3 Is it possible to use buttons without the Editor?
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>USER TEST</title>
<!-- Bootstrap styling -->
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Datatables styling -->
<link rel="stylesheet"
href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link rel="stylesheet"
href="//cdn.datatables.net/buttons/1.2.0/js/dataTables.buttons.min.js">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/dt-1.10.12/jqc-1.11.3,dt-1.10.12,b-1.2.0,se-1.2.0/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="Editor-1.5.6/css/editor.dataTables.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Users</h1>
<p>
Current User:
<shiro:principal />
</p>
</div>
</div>
<div>
<table id="table_users" class="table table-striped">
<thead>
<tr>
<th>User ID</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<!-- KEEP EMTPY BECAUSE DATA TABLES WILL FILL THE TABLE-->
<!-- <td>${userId}</td> -->
<!-- <td>${username}</td> -->
<!-- <td>${password}</td> -->
</tr>
</tbody>
</table>
</div>
<!-- JS Follows -->
<!-- JQuery -->
<!-- JQuery -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap -->
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- DataTables (Generate Tables based on Json) -->
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/r/dt-1.10.12/jqc-1.11.3,dt-1.10.12,b-1.2.0,se-1.2.0/datatables.min.js"></script>
<script type="text/javascript" src="Editor-1.5.6/js/dataTables.editor.js"></script>
<!-- Custom code -->
<script>
var table;
table=new $.fn.dataTable.Editor( {
ajax: "${pageContext.request.contextPath}/json/table/users",
table: '#table_users',
fields: [
{ label: 'User ID:', name: 'id' },
{ label: 'Username', name: 'username' },
// etc
]
} );
table = $('#table_users').DataTable( {
//Url is from Table_User class
"ajax" : "${pageContext.request.contextPath}/json/table/users",
"dom": 'Bfrtip',
"buttons":[ 'EDIT', 'DELETE' ],
"columns" : [
//ensure that fields match
//from column mapping in servlet
{"data" : "id"},
{"data" : "username"},
],
select: true,
buttons: [
{ extend: 'edit', editor: editor },
{ extend: 'delete', editor: editor }
]
});
</script>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
That is not the case. Buttons can be used without Editor. Editor adds editing abilities to the table, and interfaces well with Buttons should you want to use the two together (it appears you do!).
The files that are being loaded in the HTML are in a "funny" order. The Buttons Javascript is being loaded before DataTables or even jQuery for example. I would suggest using the download builder and select the packages you want - it will built the file in the order needed.
With Bootstrap - see this example (note that
domis not used in that example).If you look at the network tab in your browser's dev tools, is the Ajax response from the server taking a long time? Editor itself shouldn't any any latency to the initial data fetch.
Absolutely. All of these examples do.
Allan
Allan, what suggestion can you make regarding the order of libraries?
Appologies - I was getting confused by this line:
It's trying to load a Javascript file as a stylesheet. I think that can be removed completely since you have Buttons in your cdn.datatables.net include.
I would also suggest removing:
Since you are using Bootstrap, I would suggest you use the Bootstrap styling integration for DataTables (the above uses the DataTables styling). The download builder will give you the correct URL for that.
Thanks,
Allan