DataTables Editable Not Working
DataTables Editable Not Working
rajivchodisetti54
Posts: 8Questions: 4Answers: 0
HI ,
I am new to datatables and am trying to create an editable datatable and this is my html page , am able to display the data in the table but the editable options are not coming .
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>BI Metadata</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/tabletools/2.2.3/css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.css">
<style type="text/css" class="init">
body { font-size: 140%; }
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="resources/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="resources/js/dataTables.tableTools.js"></script>
<script type="text/javascript" language="javascript" src="resources/js/dataTables.editor.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" language="javascript" src="//editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.js"></script>
<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.css">
<script type="text/javascript" class="init">
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function()
{
$.get("http://localhost:8080/metadataportal/api/v2/inventory/fact_order/columns", function(data, status)
{
editor = new $.fn.dataTable.Editor(
{
"data" : data,
table: "#example",
fields: [ {
label: "Column Name:",
name: "column_name"
}, {
label: "Data Type:",
name: "data_type"
}, {
label: "Description:",
name: "description"
}, {
label: "Business Logic:",
name: "business_logic"
}, {
label: "Source of Truth:",
name: "source_systems"
}
]
} );
});
var table;
$.get("http://localhost:8080/metadataportal/api/v2/inventory/fact_order/columns", function(data, status)
{
//var api = this.api();
table = $('#example').DataTable( {
//lengthChange: false,
"data" : data,
columns: [
{ data: "column_name" },
{ data: "data_type" },
{ data: "description" },
{ data: "business_logic" },
{ data: "source_systems" }
],
tableTools: {
sRowSelect: "os",
aButtons: [
{ sExtends: "editor_create", editor: editor },
{ sExtends: "editor_edit", editor: editor },
{ sExtends: "editor_remove", editor: editor }
]
}
} );
}) ;
/* 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() ).appendTo( '#example_wrapper .col-sm-6:eq(0)' ); */
} );
</script>
</head>
<body>
<div class="col-xs-12" >
<div style="margin:0 auto; width:80%">
<h2>
Column Details
</h2>
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ColumnName</th>
<th>DataType</th>
<th>Description</th>
<th>BusinessLogic</th>
<th>SourceSystems</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ColumnName</th>
<th>DataType</th>
<th>Description</th>
<th>BusinessLogic</th>
<th>SourceSystems</th>
</tr>
</tfoot>
</table>
</div>
</div>
</body>
</html>
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Are you able to link me to the page in question so I can take a look and see what the problem is please?
Allan
HI Allan ,
I don't see any option here to attach the file , but the file given earlier was exactly copied and pasted .
I have tried the ajax version and modified by json to be returned to the exact format which was specified in the web and is working .
But if i try it the above way it's not working
And also if you have any example which has sample code to post the edited variables to server , can you please share that code
Hi,
Are you able to give me a link (i.e. the url) to the page you are working on so I can take a look at it directly and see why it is not working. I don't immediately see an issue with the code above.
Thanks,
Allan