DataTable : Using a function with ajax.reload()

DataTable : Using a function with ajax.reload() - javascript

I have some troubles with the method ajax.reload() - nothing happens. I've tested with this JavaScript:
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": {
"async": false,
"url": "arrays.txt",
"dataSrc": function(json){return json;} // really necessary ?
}
} );
$('#reload').click(function () {
table.ajax.reload(function(data){
console.log(data);
}, false);
} );
} );
arrays.txt contents :
[
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
]
]
and html contents :
<button id="reload">reload</button>
<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>
</table>
If I change "your" code (dataTables.js) to
if(callback){
var api = new _Api( settings );
callback( api.ajax.json() );
}
instead of
if(callback){
var api = new _Api( settings );
api.one( 'draw', function(){
callback( api.ajax.json() );
});
}
it works for me...
Actually, it works if you click a second time on the button, but this is not a solution.

Your code works fine.
I have removed async: false, it seems unnecessary, however the code works with this option as well.
Option dataSrc is needed because you're returning array of arrays as your data, but it could be simplified as dataSrc: "". From the manual:
Note that if your Ajax source simply returns an array of data to display, rather than an object, set this parameter to be an empty string.
See the example below for demonstration.
$(document).ready(function () {
// AJAX emulation for demonstration only
$.mockjax({
url: 'arrays.txt',
responseTime: 200,
response: function(settings){
this.responseText = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
new Date(),
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
new Date(),
"$170,750"
]
]
}
});
var table = $('#example').DataTable({
"ajax": {
url: "arrays.txt",
dataSrc: ""
}
});
$('#reload').click(function () {
table.ajax.reload(function(data){
console.log(data);
}, false);
} );
});
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
</head>
<body>
<button id="reload">reload</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</body>
</html>

Related

Datatables is not displaying the data

I already include the CDN like that the website provide and still unable to show or display any result even when copy pasted every single line of code.
Here is the CDN
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
Here is my code
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<body>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
Here is the script
[
{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300"
}
]
$('#example').DataTable( {
data: data,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' }
]
} );

You are missing two things:
JQuery library
The data variable
Please check the solution below.
var data = [{
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120"
},
{
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300"
}
]
$('#example').DataTable({
data: data,
columns: [{
data: 'name'
},
{
data: 'position'
},
{
data: 'salary'
}
]
});
<html>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<body>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
</html>

Jquery datatables.js needs jquery.
You should add it before jquery.datatables.js.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
And you even don't need to define columns in your datatable, datatables does the work itself :
<body>
<table id="example" class="display" width="100%"></table>
</body>
<script>
var dataSet = [
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
];
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
]
} );
} );
</script>

Do you see any issues with this GetData script for SharePoint?

I have included the JS and HTML script to see if anyone may see issues with these scripts? They are for a SharePoint list and both files are stored in a site asset library.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/SiteAssets/GetData.js"></script>
<!--External js file to get data from SharePoint List -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.20/css/dataTables.jqueryui.min.css">
</head>
<body>
<div>
<table id="table_id" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Joining Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Joining Date</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
<!--GetData JS script below-->
function loadItems() {
var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('EmployeeInfoTest')
/items?$select=Title,Position,Office,Age,Joining_x0020_Date";
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccHandler,
error: myErrHandler
});
}
function mySuccHandler(data) {
try {
$('#table_id').DataTable({
"aaData": data.d.results,
"aoColumns": [
{
"mData": "Title"
},
{
"mData": "Position"
},
{
"mData": "Office"
},
{
"mData": "Age"
},
{
"mData": "Joining_x0020_Date"
}
]
});
} catch (e) {
alert(e.message);
}
}
function myErrHandler(data, errMessage) {
alert("Error: " + errMessage);
}
The first portion is the HTML page, and then the second part of the script is the JS. I have commented out where the JS script starts.
Here is the output I get in SharePoint-image below:
GetData output error

well error is hard to find but still u have missed out few steps when starting with js
this link i have sent will help u out
https://www.c-sharpcorner.com/article/using-jquery-datatable-to-display-sharepoint-list-data-on-share/

I didn't find where you call the function loadItems, I load SharePoint list data after DOM ready usually as _spPageContextInfo depends on SharePoint JS libraries init(so _spPageContextInfo may not init correctly if you use it if you not delay your rest request ).
Sample demo:
<table id="example" class="wpDataTable" style="width:100%">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>City</th>
<th>TestNumber</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Title</th>
<th>City</th>
<th>TestNumber</th>
</tr>
</tfoot>
</table>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('listtitle')/items?$select=Title,City,TestNumber&$orderby=Created",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (result) {
_Data = result.d.results;
$('#example').DataTable({
columns: [
{ "data": "Title" },
{ "data": "City" },
{ "data": "TestNumber" }
],
data: _Data,
"displayLength": 25
})
},
error: function (error) {
console.log(JSON.stringify(error));
}
})
})
</script>

Unique DataTable column header tooltips

I got this code from another question, but my question is how could this code be modified so that each column header can have a custom, unique tooltip? For example, user hovers over Salary and tooltip displays "some text", and when you hover over Start Date, it displays "some different text" ? I assume I would have to change the .each() function to something else, but I'm not too well versed in JavaScript to know how to approach this.
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": 'https://api.myjson.com/bins/qgcu',
"initComplete": function(settings){
$('#example thead th').each(function () {
var $td = $(this);
$td.attr('title', $td.text());
});
/* Apply the tooltips */
$('#example thead th[title]').tooltip(
{
"container": 'body'
});
}
});
});
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</tfoot>
</table>

Yes, You are almost on the way.
This .each function $('#example thead th').each(function () { is used to set the title(ToolTip) of header.
There are number of ways to do this.
1. In this .each function you can check the header text and then can decide your custom text.
Here is the code snippet:
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": 'https://api.myjson.com/bins/qgcu',
"initComplete": function(settings){
$('#example thead th').each(function () {
var $td = $(this);
var headerText = $td.text();
var headerTitle=$td.text();
if ( headerText == "Name" )
headerTitle = "custom Name";
else if (headerText == "Position" )
headerTitle = "custom Position";
else if ( headerText == "Office" )
headerTitle = "custom Office";
else if ( headerText == "Salary" )
headerTitle = "custom Salary";
else if ( headerText == "Start Date" )
headerTitle = "custom Start Date";
$td.attr('title', headerTitle);
});
/* Apply the tooltips */
$('#example thead th[title]').tooltip(
{
"container": 'body'
});
}
});
});
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</tfoot>
</table>
2. Set the custom title attribute as a header attribute and .each function you can get custom title attribute and set as title(ToolTip) of header.
Here is the code snippet:
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": 'https://api.myjson.com/bins/qgcu',
"initComplete": function(settings){
$('#example thead th').each(function () {
var $td = $(this);
$td.attr('title', $td.attr('custom-title'));
});
/* Apply the tooltips */
$('#example thead th[title]').tooltip(
{
"container": 'body'
});
}
});
});
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th custom-title="custom Name">Name</th>
<th custom-title="custom Position">Position</th>
<th custom-title="custom Office">Office</th>
<th custom-title="custom Salary">Salary</th>
<th custom-title="custom Start Date">Start Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
<th>Start Date</th>
</tr>
</tfoot>
</table>

How to apply columnDefs on jquery Datatable with saveState opiton to true

I have the following very simple example using jQuery Datatables v1.10.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable(
{
"columnDefs": [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
</script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
</head>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</body>
</html>
Simple and works just fine. Remove the Sorting options from the columns just as I want to. However I want to use the stateSave option:
$(document).ready(function() {
$('#example').DataTable(
{ stateSave: true},
{
"columnDefs": [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
But now the sorting is again available for all columns (the configuration from columnDefs is not applied).
So what I want to achieve is using the stateSave but still have the configuration for the sorting applied.
I am playing with
"stateLoadParams": function (settings, data) {
//console.log(settings);
settings.aoColumns[1].orderable = false;
console.log(settings);
}
Like so:
$(document).ready(function() {
$('#example').DataTable(
{ stateSave: true,
"stateLoadParams": function (settings, data) {
//console.log(settings);
settings.aoColumns[1].orderable = false;
console.log(settings);
}},
{
"columnDefs": [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});
But I am still not able to reapply the sorting options

The whole config should only be one object. You are creating multiple objects and therefore multiple arguments for the main datatable() function. Only the first argument is used for setting the internal options and the others are being ignored
Try
$(document).ready(function() {
$('#example').DataTable({
stateSave: true,
columnDefs : [
{ "orderable": false, "targets": 1 },
{ "orderable": false, "targets": 2 }
]
});
});

DataTables fails to load ajax data source objects

I want to do this: https://datatables.net/examples/ajax/objects.html
So I have following response.php code:
<?php
include_once("info.php");
$sql = "SELECT * FROM table1";
$result = mysqli_query($link, $sql);
$amparray = array();
while($row = mysqli_fetch_assoc($result)){
$emparray['data'][] = $row;
}
header('Content-Type: application/json');
echo json_encode($emparray);
mysqli_close($link);
/*
The output will be of the form:
{"data": [{"id":"1","Name":"Test1","URL":"test1.com","Language":"English","Number":"5165489"},{"id":"2","Name":"Test2","URL":"test2.com","Language":"English","Number":"4747489"}]}
*/
?>
and my index.php code:
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
"url": "response.php"
},
"columns": [
{ "data": "Name" },
{ "data": "URL" },
{ "data": "Number" },
{ "data": "Language" }
]
} );
} );
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>URL</th>
<th>Number</th>
<th>Language</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>URL</th>
<th>Number</th>
<th>Language</th>
</tr>
</tfoot>
</table>
</body>
</html>
According to JSONLint my JSON output from response.php is valid and the same as wanted on datatables.net example. Even if I download the output and save as data.txt and use
"ajax": {"url": "data.txt"},
It still doesn't work. It just loads no data: No data avaiable in table.
*Edit in index.php HostName->Name //just a misstype in posting here-

Solved, the code I posted above now normally works. I have no idea why it didn't worked and now it works - probably some mistake like space was not space but some symbol - I just copied and pasted the code and now it works. Strange -.-

Develop Reference

JavaScript is the programming language of the Web.

DataTable : Using a function with ajax.reload() - javascript

Related

Datatables is not displaying the data

Do you see any issues with this GetData script for SharePoint?

Unique DataTable column header tooltips

How to apply columnDefs on jquery Datatable with saveState opiton to true

DataTables fails to load ajax data source objects

Categories

Resources