get started with a basic grid

wmpso · August 2018

I'm trying to get started with a very basic grid as follows:

I receive data as a variable:
var x =
[
{"one":"2018352845","date":"07/25/2018","time":"15:15:10"},
{"one":"2018354815","date":"07/26/2018","time":"17:05:15"},
{"one":"2018357762","date":"07/28/2018","time":"10:42:55"}
]

I then try to bind to the html grid as such:
$('#gridContent').DataTable({
data: x,
columns: [
{ data: 'one' },
{ data: 'date' },
{ data: 'time' }
]
});

my html table looks like:

One	Date	Time

What i get is:

DataTables warning: table id=gridContent - Requested unknown parameter 'one' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Any ideas as I'd like to think I've got it setup right based on the documentation I've read so far.

Thanks,

kthorngren · August 2018

There must be a problem elsewhere in your page. I copied your code to this test case and it works:
http://live.datatables.net/vibejugi/1/edit

Are you initializing this Datatable somewhere else?

Kevin

wmpso · August 2018

html file

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page</title>
<meta charset="utf-8">
<meta name="description" content="test">
<meta name="author" content="test">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <!-- datatables.net -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

<!-- Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!--site specific-->
<link href="assets/css/site.css" rel="stylesheet">

</head>
<body>

<div id="bodyCopy" class="container">
<div class="panel panel-default">
<div class="panel-heading">
Header for data
</div>
<div class="panel-body">
<ul class="nav nav-pills btn-sm">
<li><a href="#" id="reloadData"><span class="glyphicon glyphicon-refresh"></span> Refresh</a></li>
</ul>

<table id="gridContent" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>One</th>
<th>Date</th>
<th>Time</th>
</tr>
</thead>
</table>
<div id="ajaxSpinnerContainer">
<center>
<img src="assets/images/ajax-loader.gif" id="ajaxSpinnerImage" alt="Loading Data..." title="Loading Data...">
<br />
We are currently fetching the data...
</center>
</div>
</div>
</div>
<br />
</div>

<script src="assets/js/testfile.js"></script>
</body>
</html>

testfile.js

/*global $ */
var ae = appError;

$(document).ready(function () {
$('#ajaxSpinnerContainer').show();
$("#reloadData").hide();
$("#gridContent").hide();

getTestData();

//events
$("#reloadData").click(function () {
    $('#ajaxSpinnerContainer').show();
    $("#reloadData").hide();
    $("#gridContent").hide();

    getTestData();
});

});

//ajax calls
function getTestData() {
jQuery.ajax({
type: "GET",
url: epGetTestData, //url for web api
data: '',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, status, xhr) {
status = xhr.responseText;
statusCode = xhr.status;

        $('#ajaxSpinnerContainer').hide();

        if (statusCode === 200) {  
                $("#reloadData").show();
                $("#gridContent").show();

                loadContentGrid(status)
        }
        else {
            $("#bodyCopy").hide();

            JSAlert.alert("error").then(function () {
                window.location.href = "index.html";
            });
        }
        status = "";
    },
    error: function (xhr, textStatus, errorThrown) {
        status = "{'d':'0," + errorThrown + "'}";
        status = status.replace(/'/g, '"');

        ae.viewName = "test";
        ae.functionName = "getTestData";
        ae.statusText = xhr.statusText;
        ae.responseText = xhr.responseText;
        ae.readyState = xhr.readyState;
        ae.responseStatus = xhr.status;
        ae.createdBy = 0;

        loadAppErrors(ae);
    }
});

}

//bind to grid
function loadContentGrid(gridData) {
var result = removeFirstLast(gridData);
var j = removeFirstLast(result);
var x = j.substring(j.indexOf(":") + 1);

$('#gridContent').DataTable({
    data: x,
    columns: [
        { data: 'one' },
        { data: 'Date' },
        { data: 'Time' },
    ]
});

scrollToFocus("gridContent");

}

function removeFirstLast(val) {
var sData = val.slice(1, -1);

return sData;

}

Example of the data from the web api and after being reformated:

[
{"one":"2018352845","date":"07/25/2018","time":"15:15:10"},
{"one":"2018354815","date":"07/26/2018","time":"17:05:15"},
{"one":"2018357762","date":"07/28/2018","time":"10:42:55"}
]

kthorngren · August 2018

Thats a lot of code to look through. What is x if you use console.log(x); after var x = j.substring(j.indexOf(":") + 1);?

Is it a Javascript array of objects or a string? Looks to me like it would be a string which is not going to work. As shown in my example and in the sample of your data x should be an array of objects.

Kevin

wmpso · August 2018

figured it would be easy to see the entire process. i thought it was an array; might try the method: Array.from().

here is what the data looks like as it comes from the api:

[
{
"testData": [
{"one":"2018352845","date":"07/25/2018","time":"15:15:10"},
{"one":"2018354815","date":"07/26/2018","time":"17:05:15"},
{"one":"2018357762","date":"07/28/2018","time":"10:42:55"}
]
}
]

i'd prefer just to load directly from the api to the grid but I can't figure that one out

allan · August 2018

Try using ajax.dataSrc:

ajax: {
  url: ..,
  dataSrc: '0.testData'
}

I'm not certain that will work since its unusual to have an array of a single item at the top level, but it should...

Allan

wmpso · August 2018

well now im getting a Loading.... message but nothing happens

get started with a basic grid

get started with a basic grid

Answers

Howdy, Stranger!

Categories

DataTables

get started with a basic grid

get started with a basic grid

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables