Edit/Delete buttons are not showing up.
Edit/Delete buttons are not showing up.
gtjquery
Posts: 2Questions: 1Answers: 0
Please find below my jsp file. I am not able to see the edit/delete button. I get the warning - unknown button type when I try to load the page. Can anyone please help? I am stuck on this issue.
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MODIFY PO/CLIN</title>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.css">
<link rel="stylesheet" type="text/css" href="http//cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="http://editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.js"></script>
<script type="text/javascript" src="http//cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" src="<c:url value="/resources/jquery.smartmenus.js" />"></script>
<style type="text/css">
@media screen and (min-width: 768px) {
#main-menu {
position: relative;
z-index: 9999;
width: 90em;
}
#main-menu ul {
width: 12em;
/* fixed width only please - you can use the "subMenusMinWidth"/"subMenusMaxWidth" script options to override this if you like */
}
}
body
{
margin:0;
padding:0;
background-color:#f1f1f1;
}
.box
{
width:1270px;
padding:20px;
background-color:#fff;
border:1px solid #ccc;
border-radius:5px;
margin-top:25px;
}
</style>
</head>
<body>
<div>
<%@ include file="EBRMMenu.jsp"%>
</div>
<div class="container box">
<input type="submit" class="styled-button-8" value="Submit">
<h1 align="center">Modify PO/CLIN Data</h1>
<br />
<div class="table-responsive">
<br />
<br />
<br />
<table id="govData" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>CUSTOMER</th>
<th>PO ORDER NO</th>
<th>BASE PO</th>
<th>CLIN</th>
<th>TOTAL AMOUNT</th>
<th>TOTAL QUANTITY</th>
<th>UNIT PRICE</th>
</tr>
</thead>
</table>
</div>
</div>
<c:url var="govPOCLINDataUrl" value="/gov/getGOVPOCLINData" />
<script type="text/javascript">
jQuery.fn.dataTableExt.oApi.fnPagingInfo = function(oSettings) {
return {
"iStart" : oSettings._iDisplayStart,
"iEnd" : oSettings.fnDisplayEnd(),
"iLength" : oSettings._iDisplayLength,
"iTotal" : oSettings.fnRecordsTotal(),
"iFilteredTotal" : oSettings.fnRecordsDisplay(),
"iPage" : oSettings._iDisplayLength === -1 ? 0 : Math
.ceil(oSettings._iDisplayStart
/ oSettings._iDisplayLength),
"iTotalPages" : oSettings._iDisplayLength === -1 ? 0 : Math
.ceil(oSettings.fnRecordsDisplay()
/ oSettings._iDisplayLength)
};
};
var selected = new Array();
var table;
$(document).ready(function() {
table =$("#govData").dataTable({
"bProcessing" : true,
"bServerSide" : true,
"sort" : "position",
//bStateSave variable you can use to save state on client cookies: set value "true"
"bStateSave" : false,
"lengthMenu" : [[10, 25, 100, -1], [10, 25, 100, "All"]],
//Default: Page display length
"iDisplayLength" : 10,
"iDisplayStart" : 0,
//"sPaginationType": "full_numbers",
"fnDrawCallback" : function() {
},
"sAjaxSource" : '${govPOCLINDataUrl}',
"aoColumns" : [
{ //"mData": "id",
"mData": "govPOId",
"bSearchable": false,
"bSortable": false,
"bVisible": true
},
{"mData" : "customerId"},
{"mData" : "poOrderNo"},
{"mData" : "basePoOrderNo"},
{"mData" : "clin"},
{"mData" : "totalPrice"},
{"mData" : "quantity"},
{"mData" : "unitPrice"}
]
});
var tableTools = new $.fn.dataTable.TableTools( table, {
sRowSelect: "os",
aButtons: [
{ sExtends: "editor_create", editor: editor },
{ sExtends: "editor_edit", editor: editor },
{ sExtends: "editor_remove", editor: editor }
]
} );
$(tableTools.fnContainer()).insertBefore('#govData_wrapper');
var editor = new $.fn.dataTable.Editor(table);
</script>
</body>
This discussion has been closed.
Answers
TableTools has been deprecated:
https://datatables.net/extensions/tabletools/
Please use the Buttons extension for the Editor buttons. You can see a basic example here:
https://editor.datatables.net/examples/simple/simple.html
Kevin
The other thing to note is that you are using the
editorvariable before it is defined, hence why it isn't working at all. In fact you should really be getting an error on the code stating that.Allan
Allan,
I noticed that issue already and fixed it, but the buttons don't even show up on the UI. I am going to try what kthorngren suggested.