Im using Django classbased views CRUD but my frontend is DataTables API RestFramework, My problem is how can I get the Primary Key per rows to Edit and Delete the Data? I can display all the data in DataTables but I can't edit and delete since primary key is not found.
Thank You.
JS
<script>
$(document).ready(function() {
var table = $('#table').DataTable({
"ajax": "/api/mlist/?format=datatables",
"columns": [
{
"data": "A_Id",
"render": function(data, type, row, meta){
if(type === 'display'){
data = '' + data + '';
}
return data;
}
},
});
</script>
Table.html
<table id="table" class="table table-striped table-bordered" style="width:100%" data-server-side="true" data-ajax="/api/mlist/?format=datatables">
<thead>
<tr>
<th>Act No</th>
</tr>
</thead>
</table>
API list
GET /api/mlist/
HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept
{
"count": 3,
"next": null,
"previous": null,
"results": [
{
"id": 2377,
"A_Id": "VML2020-000000",
}
]
}
Related
This is driving me nuts. I have a web site that works fine. Datatable populates from a .php ajax call. I'm migrating that code to a different web site. Identical ajax call but this time won't populate!
Here is the js of the one that works:
$('#divTable').DataTable({
"ajax": "screen_highYield.php",
"columns": [
{ "data": "Symbol" },
{ "data": "CompanyName" },
{ "data": "ExDivDate" },
{ "data": "Dividend" },
{ "data": "DivYield" },
{ "data": "DivFrequency" },
{ "data": "DivPayDate" }
]
});
And the html:
<div id="highYieldDiv">
<table id="divTable" class="display" style="width:100%">
<thead>
<tr>
<th>Symbol</th>
<th>Company Name</th>
<th>Ex-Div<br>Date</th>
<th>Dividend</th>
<th>Div<br>Yield%</th>
<th>Div<br>Frequency</th>
<th>Pay Date</th>
</tr>
</thead>
</table>
</div>
Here is the js of the one that fails:
$('#divTable').DataTable({
"ajax": {
url: "screen_highYield.php",
"done": function() {
alert('done');
},
"success": function(data) {
console.log(JSON.stringify(data));
},
"error": function(jqXHR, textStatus, errorThrown) {
alert('error');
},
"initComplete": function(settings, json) {
alert( 'DataTables has finished its initialisation.' );
}
},
"columns": [
{ "data": "Symbol" },
{ "data": "CompanyName" },
{ "data": "ExDivDate" },
{ "data": "Dividend" },
{ "data": "DivYield" },
{ "data": "DivFrequency" },
{ "data": "DivPayDate" }
]
});
And the html:
<div id="highYieldDiv">
<table id="divTable" class="display" style="width:100%">
<thead>
<tr>
<th>Symbol</th>
<th>Company Name</th>
<th>Ex-Div<br>Date</th>
<th>Dividend</th>
<th>Div<br>Yield%</th>
<th>Div<br>Frequency</th>
<th>Pay Date</th>
</tr>
</thead>
</table>
</div>
I added the "done", "success", "error", and "initComplete" in an attempt to figure out what's wrong. Nothing was output to the console. Then I moved the js to the $(document).ready function and then I got the "success" to trigger. (Didn't have to do that in the one that works.) I took the json it output and verified it was valid json using jsonlint. The table just says Loading...
I don't understand why it works one place an not another. These black boxes are so mysterious and difficult to debug. Ideas?
I am trying to load the below json data into Datatables, but I'm facing error. My web browser(chrome) successfully downloads the data, but it does not represent the data. The table shows only the name of columns but nothing. Can someone please help me?
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"Feature_ID": "4",
"Clean_Feature_Name": "Abalos Colles",
"Feature_Type": "Collis, colles",
"Feature_Type_Code": "CO",
"title": "['Arecibo radar imagery of Mars: II. Chryse-Xanthe, polar caps, and other regions']",
"author": "['Harmon, John K.', 'Nolan, Michael C.']",
"year": 2017,
"bibcode": "2017Icar..281..162H",
"pub": "Icarus"
}
}
]
}
And below is my javascript code.
$(document).ready(function() {
$('#example').DataTable( {
"ajax" : {
"url" : "http://212.201.46.76/data_final/sample_paper.json",
},
"columns" : [
{ "features" : "properties.Feature_Id" },
{ "features" : "properties.Clean_Feature_Name" },
{ "features" : "properties.Feature_Type" },
{ "features" : "properties.Feature_Type_Code" },
{ "features" : "properties.title" },
{ "features" : "properties.author" },
{ "features" : "properties.year" },
{ "features" : "properties.bibcode" },
{ "features" : "properties.pub" },
]
} );
} );
My HTML code
<body>
<button id="reload">Reload</button>
<div class="container">
<table id="example" class="display" width="100%">
<thead>
<tr>
<th>Feature_ID</th>
<th>Clean_Feature_Name</th>
<th>Feature_Type</th>
<th>Feature_Type_Code</th>
<th>Bibcode</th>
<th>Title</th>
<th>Author</th>
<th>Year</th>
<th>Pub</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Feature_ID</th>
<th>Clean_Feature_Name</th>
<th>Feature_Type</th>
<th>Feature_Type_Code</th>
<th>Bibcode</th>
<th>Title</th>
<th>Author</th>
<th>Year</th>
<th>Pub</th>
</tr>
</tfoot>
</table>
</div>
</body>
You're specifying your columns array wrong.
The columns array is where you specify a number of options in your table, on a per-column basis. There is no features option available; presumably that's why you're not seeing a table. Available values are here.
Now, you should be able to simply do this:
$(document).ready(function() {
$('#example').DataTable( {
"ajax" : {
"url" : "http://212.201.46.76/data_final/sample_paper.json",
}
});
});
as in this example (which you probably used to get started), removing your columns definition entirely. You've already specified the columns using HTML. If you need different options from the example, you need to learn to use columns correctly.
For more information on this, see this post.
Finally I found a solution.
This is how you do when the json file has different format with examples.
"dataSrc" <-- follow your json format
{ "data" : "properties.title"} <-- "data" is always "data' it's a fixed key. you should not change it whatever "dataSrc" is.
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"ajax" : {
"url": "http://212.201.46.76/data_final/sample_paper.json",
"dataSrc": "features"
},
"columns": [
{ "data" : "properties.title" },
{ "data" : "properties.author" },
{ "data" : "properties.year" },
{ "data" : "properties.bibcode" },
{ "data" : "properties.pub" }
]
});
I am working on a java web application (Spring Frame work). Once a certain URL is hit, a Json object is created. I have access to this data and I was able to console.log it. But I need to display this Json object which is an array of more than 1000 of record in a table format. The thing that I am not sure is how to do it. I have used this tutorial(https://datatables.net/examples/ajax/null_data_source.html), to do some thing but I was not successful. I am very new at this concept and my question might be really dump. But I was wondering maybe I can get some help from here.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src ="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="resource/css/jquery.dataTables.min.css"></link>
</h:head>
<h:body>
<button id="processData">ProcessData</button>
<div id="wrapper">
<div id="header">
<h2>List of processed data</h2>
</div>
</div>
<table id="dataTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID1</th>
<th>ID2</th>
<th>Number Of Matching Terms</th>
<th>Matching Terms </th>
<th>Original Terms in Data Source One</th>
<th>Original Terms in Data Source Two</th>
<th>Acceptance Action</th>
<th>Decline Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID1</th>
<th>ID2</th>
<th>Number Of Matching Terms</th>
<th>Matching Terms </th>
<th>Original Terms in Data Source One</th>
<th>Original Terms in Data Source Two</th>
<th>Acceptance Action</th>
<th>Decline Action</th>
</tr>
</tfoot>
</table>
<script src="js/mainJs.js"></script>
</h:body>
here is my js code:
$(document).ready(function(){
$("#processData").click(function (){
$.getJSON('http://localhost:8080/gtlc/PVJson', function(data){
console.log(data);
});
var table = $('#dataTable').DataTable( {
"ajax": data,
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Click!</button>"
} ]
});
})
});
</html>
when I look at my console I can see the following:
here is the error I get
Here is a small sample of my json object
"records": [{
"id1": 1200314690100003429,
"id2": 1045,
"matchingTerms": ["adaptor"],
"orginalTermsTable1": ["AC ADAPTOR FOR JDE", "www.greenlightcorp.net", "AC ADAPTOR FOR JDE", ""],
"orginalTermsTable2": ["Greenlight Technologies, Inc.", "GRC Adaptor for People Soft", "Customized software for SAP, therefore version not specified"]
}, {
"id1": 1200314690100003429,
"id2": 1046,
"matchingTerms": ["adaptor"],
"orginalTermsTable1": ["AC ADAPTOR FOR JDE", "www.greenlightcorp.net", "AC ADAPTOR FOR JDE", ""],
"orginalTermsTable2": ["Greenlight Technologies, Inc.", "GRC Adaptor for Oracle", "Customized software for SAP, therefore version not specified"]
}]
I was wondering if some one could give me some hints on how I can get a hold to the json object and represent it on the dataTable
The problem is that the DataTable is being initialized a microsecond after ajax request.
When the Ajax request is sent, it might take 1, 2, 3 or 10 seconds to come back with the data... so data is undefined until the Ajax response comes back.
Move your DataTable initialization in the callback function at it should work.
FIDDLE
$(document).ready(function() {
var data = {
"records": [{
"id1": 1200314690100003429,
"id2": 1045,
"matchingTerms": ["adaptor"],
"orginalTermsTable1": ["AC ADAPTOR FOR JDE", "www.greenlightcorp.net", "AC ADAPTOR FOR JDE", ""],
"orginalTermsTable2": ["Greenlight Technologies, Inc.", "GRC Adaptor for People Soft", "Customized software for SAP, therefore version not specified"]
}, {
"id1": 1200314690100003429,
"id2": 1046,
"matchingTerms": ["adaptor"],
"orginalTermsTable1": ["AC ADAPTOR FOR JDE", "www.greenlightcorp.net", "AC ADAPTOR FOR JDE", ""],
"orginalTermsTable2": ["Greenlight Technologies, Inc.", "GRC Adaptor for Oracle", "Customized software for SAP, therefore version not specified"]
}]
};
var table = $('#dataTable').DataTable({
"data": data.records,
"columns": [{
"data": "id1"
},
{
"data": "id2"
},
{
"data": "matchingTerms",
"render": function(data, type, row, meta) {
return data.length;
}
},
{
"data": "matchingTerms"
},
{
"data": "orginalTermsTable1"
},
{
"data": "orginalTermsTable2"
},
{
"data": "",
"render": function(data, type, row, meta) {
return "<button>Click</button>";
}
},
{
"data": "",
"render": function(data, type, row, meta) {
return "<button>Click</button>";
}
}
]
});
});
Better solution :
FIDDLE
$(document).ready(function() {
var table = $('#dataTable').DataTable({
"ajax": {
"url" : "http://localhost:8080/gtlc/PVJson",
"dataSrc" : "records"
},
"columns": [{
"data": "id1"
},
{
"data": "id2"
},
{
"data": "matchingTerms",
"render": function(data, type, row, meta) {
return data.length;
}
},
{
"data": "matchingTerms"
},
{
"data": "orginalTermsTable1"
},
{
"data": "orginalTermsTable2"
},
{
"data": "",
"render": function(data, type, row, meta) {
return "<button>Click</button>";
}
},
{
"data": "",
"render": function(data, type, row, meta) {
return "<button>Click</button>";
}
}
]
});
});
I developing a admin panel. I am able to load data that is getting from Ajax API response in bootstrap dataTable but default search and pagination of the table is not working.
I tried
"processing": true,
"serverSide": true
to initialize the table but it is not working.
Is It possible this dataTable functionality work as default provided by the Bootstrap dataTable.
I want to achieve the following steps:
Step1: A form with submit button.
Step2: When clicked on submit, make an ajax call and get JSON Data back to add it into dataTable rows dynamically.
Step3:
$("#editable-sample").DataTable({ // what should I do here.});
Problem
Data is loading but search box and pagination is not woking on the page.
Can you post your code?
Are you sure you fulfilled the dataTables prerequisites:
The table must have <thead> and <tbody> tags
The table must have an id that is used in the launch script example:
<table class="table table-bordered" id="dataTables-example">
<script>
$(document).ready(function() {
$('#dataTables-example').dataTable();
});
</script>
datatables supports Ajax data source (objects), see
Below you can see an example which taken from dataTables' doc
JS
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/objects.txt", //
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
HTML
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
AJAX
{
"data": [
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011/01/25",
"office": "New York",
"extn": "4226"
}
]
}
$.ajax({..
success: function(data) {..
var table = $('#datatable').DataTable();
table.clear().draw();
var rowNode= new Array();
for (var key=0, size=data.length; key<size; key++){
var j = -1;
var r = new Array();
// represent columns as array
r[++j] ='<tr><td><input type="hidden" name="somename1" value="'+data[key].id+'"/><input type="hidden" name="somename2" value="'+data[key].is_deleted+'"/>'+data[key].lic_category_name+'</td>';
r[++j] = '<td>'+data[key].someval1+'</td>';
r[++j] = '<td>'+ data[key].someval2+'</td>';
r[++j] = '<td>'+ data[key].someval13+ '</td>';
r[++j] ='<td class="last"><i class="fa fa-eye"></i> <i class="fa fa-edit"></i> <i class="fa fa-trash"></i></td></tr>';
rowNode = table.row.add(r);
}
rowNode.draw().node()
}
}
My JSON Response,
[{"id":70,"somekey1":"GC 1","somekey2":"GC 1","somekey3":8,"somekey4":5000,"somekey5":1,"somekey5":1,"is_deleted":0}]
It worked for me ..
The problem occurred because of 'column' attribute try to match data row values with column before it get the data.
so i place the close Curly bracket of 'ajax' attribute before 'column' attribute.
now the column attribute function get call only after ajax function is complete.
$(document).ready(function() {
$('#example').DataTable( {
"ajax":{ "data/objects.txt" },//<------------------------------------------------place here//
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
});
} );
I am using DataTables with Jquery, I have an JSON object data source I want to fetch via Ajax and display in the table.
JSON data is returned from the /live/log url and is formatted as follows :
{
"Logs": [
{
"date": "2015-04-22T14:00:39.086Z",
"eventType": "event1",
"str": "Application startup"
},
{
"date": "2015-04-22T14:01:27.839Z",
"eventType": "event2",
"str": "test Logged in"
}
]
}
My Table HTML :
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Date</th>
<th>Event</th>
<th>Description</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Date</th>
<th>Event</th>
<th>Description</th>
</tr>
</tfoot>
</table>
And finally the JS to fetch and populate the datatable :
$(document).ready(function() {
$('#example').dataTable( {
"ajax": "/live/log",
"columns": [
{"data": "date"},
{"data": "eventType"},
{"data": "str"}
]
});
});
I can see via the debugger the JSON data is being fetched correctly.
I seem to get an error in the datatables js relating to the JSON data.
Value aData in fnInitalise is null - Uncaught TypeError: Cannot read property 'length' of undefined. The Datatable gets stuck saying "Loading..."
I'm sure it's probably due to my JSON data formatting. Can anyone point me in the right direction?
You should access the Log object in data, because it is the array that the column will loop through when constructing your table. The plugin works by assuming that the name of your array is called data, i.e.:
{
"data": [
// Array of objects
]
}
But since you are using Log in your case:
{
"Logs": [
// Array of objects
]
}
...you will need to manually specify the dataSrc attribute (because you are using a custom data property):
$(document).ready(function() {
$('#example').dataTable( {
"ajax": {
"url": "/live/log",
"dataSrc": "Logs"
},
"columns": [
{"data": "date"},
{"data": "eventType"},
{"data": "str"}
]
});
});