ajax.json() question, any help would be appreciated
ajax.json() question, any help would be appreciated
xMan2
Posts: 16Questions: 1Answers: 0
My debuge code -oxabuh
The DataTables page I'm referencing - https://datatables.net/reference/api/ajax.json()
What I have:
I'm new to DataTables and trying to get a couple things working.
1.) I'm using javascript to load up a dataset from a oracle table
2.) In my HTML I setup load DataTables
What my question is:
I have DataTables initialized and my dataset is displaying but DataTables doesn't appear to know things like how many rows I have and I think it's how I'm passing my ajax/json results to DataTables, but I don't know for sure.
Once I get things talking correctly, I'll just need to make one column editable and post result back to db when saving.
************** 1.) my javascript to load from oracle db *******************
function GetDetailTblValues() {
//variables from my HTML dropdowns
var cid = $('#CategoryId').val();
var pid = $('#ProjectId').val();
//send out to output screen for testing
console.log(cid,pid);
var model = { categoryId: cid, projectId: pid }
$.ajax({
url: gbDataURL,
data: JSON.stringify(model),
type: 'POST',
async: true,
contentType: 'application/json; charset=utf-8',
success: function (data) {
//continue code if successful
alert("ajax call was successful")
//console.log(data);
var table = '<tr>';
//add headers
table += '<th>Mantis#</th>';
table += '<th>priority</th>';
table += '<th>status</th>';
table += '<th>build date</th>';
table += '<th>summary</th>';
$.each(data.results, function (i) {
table += '<tr>';
//data
table += '<td>' + data.results[i].id + '</td>';
table += '<td>' + data.results[i].priority + '</td>';
table += '<td>' + data.results[i].status + '</td>';
table += '<td>' + data.results[i].build + '</td>';
table += '<td>' + data.results[i].Summary + '</td>';
table += '</tr>';
});
$('#results-grid').html(table);
},
error: function (data, status, error) {
//error goes here
alert("ajax call failed")
}
});
}
************** 2.) my HTML ****************
<link rel="stylesheet" type="text/css" href="~/_assets/content/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="~/_assets/content/shCore.css">
<link rel="stylesheet" type="text/css" href="~/_assets/content/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="~/@app.jsPath/jquery.js"></script>
<script type="text/javascript" language="javascript" src="~/@app.jsPath/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="~/@app.jsPath/shCore.js"></script>
<script type="text/javascript" language="javascript" src="~/@app.jsPath/demo.js"></script>
<p>
<img src="~/_assets/files/img/3.png" width="1000" height="100">
</p>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function ()
{
// Initialize my table
var table = $('#results-grid').DataTable(
{
"bFilter": false,
"bSort": false,
"paging": false,
"ording": false,
"info": false,
//"bPaginate": false,
//"bJQueryUI": true,
//"bDestroy": true,
// where n is the number of rows you wish to displ
//"bAutoWidth": false,
//"sWidth": "500px"
//"bServerSide": true,
});
});
</script>
<style>
div.box1
{
position: absolute;
top: 80px;
left: 10px;
background-color: lightgray;
width:900px;
height:25px;
padding:5px;
border:1px solid gray;
margin:20px;
}
</style>
<div class="box1">
@**************** start of dropdown list boxes*@
<div>
@*Main DIV*@
<div>
@*<h3 class="section-title">Category      Project</h3>*@
Category
<select id="CategoryId">
<option value="0">EPM</option>
<option value="1518">PBF</option>
<option value="0">Financials</option>
<option value="0">PowerPlant</option>
<option value="0">Reporting</option>
<option value="0">Treasury</option>
</select>
        
Project
<select id="ProjectId">
<option value="0">All Projects</option>
<option value="0">EPS</option>
<option value="0">EPS Enhancements</option>
<option value="103">EPS Maintenance</option>
</select>
   
<button id="Go" type="button" onclick="GetDetailTblValues()">Go</button>
    
<button type="button" onclick="ClrDetailTblValues()">Clear table details</button>
<br /><br />
</div>
@**************** end of dropdown list boxes*@
</div>
<script>
window.gbDataURL = '@Url.HttpRouteUrl("defaultApi", New With {.controller = "home", .action = "getMantixData", .httproute = True})';
</script>
@*If this script binding is placed some where else just make sure DOM is ready*@
<script src="~/@app.jsPath/dxj.js"></script>
<table id="results-grid" class="display" cellspacing="1" style="width:90%">
<thead>
<tr>
<th>Mantis#</th>
<th>priority</th>
<th>status</th>
<th>build</th>
<th style ="width:50%">summary</th>
</tr>
</thead>
@*Enter some blank rows*@
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
This question has accepted answers - jump to:
This discussion has been closed.
Answers
According to your debug trace you have 5 columns and 3 rows, all empty - which is coming from your "enter some blank rows" code.
I don't see, beyond that, where you are adding the data. Use
rows.add()if you want to add them via the API.Allan
I'm adding rows via my javascript function GetDetailTblValues(), listed first in my post. here's a code snippet. Also, I'll look at the rows.add function for the api.
$.each(data.results, function (i) {
table += '<tr>';
Sorry - I missed that as it was outside of the syntax highligthing. i've reformatted the post now (How to highlight code in Markdown).
You are running into this FAQ. If the DataTable already exists you need to use the API (
row.add()orrows.add()to add the new rows.Allan
Thanks Allan,
That makes perfect sense. Basically all I'm doing in my javascript is building the dataset and telling datatables to display the finished dataset.
When I start my site I have three blank rows and datatables shows my header properly and has a row count of three.
OnClick I execute my javascript and datatables assumes my "#results-grid" header row is just another row and row count is still three.
Still very new to this one and trying to get the row.add() api call to build my header row and data rows isn't working for me. Still trying to figure it out.
Something like:
At top of
GetDetailTblValuesfunction:In the row creation loop:
where
stris the<tr>row you are creating.And finally at the end of
GetDetailTblValues:should do it.
Allan
aruquf
http://debug.datatables.net/aruquf
hummmm
I'm doing something goofy js is complaining that it can read the .add property in table.row.add().
The datatables debugger is also saying I don't have API plug-in methods installed. I thought all I had to do there is add in my include, I think I'm almost there.
******** put every thing in my html for this test
***********************My javascript
I was using dataTable(), instead of DataTable()
Found this one in datatables help. Now, just need to format my td adds....got a bunch of garbage.
Got rid of the garbage, got one other error trying to work out. Then I'll upload the debug and post my final results.
That isn't quite right. Use just one
row.add()call per row!Allan
Thanks Allan I'll change that. Here's what I currently have and it's working.
But I like your syntax better
Thanks again Allan, all my questions have been answered for this thread.
I'll go do some reading now, I only have one other piece to add for this table and that's to make one column editable with write back to my db.
-xMan2
Actually - your method is more performant! I only suggested the other method as that is what you are already using so I thought it would be easier to use.
Passing in an array of data as you are (or objects if you were using object based tables) means that DataTables doesn't need to read the data back from the DOM which makes things much faster.
Allan