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>
Related
I am trying to use DataTables with Tabledit , but I am getting "TypeError: Cannot set properties of undefined (setting 'nTf')". The number of tags are also matching.
To make it work if I comment the "editable" object it doesn't show any error. How can i make it work? But this part is required by the lib as it will make only those column editable.
<html>
<head>
<title>Person Information</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<script>
$(document).ready(function () {
var baseurl = "https://run.mocky.io/v3/391adcbb-160c-4111-b853-2e273700676b";
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", baseurl, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var persons = JSON.parse(xmlhttp.responseText);
$.fn.dataTable.ext.errMode = 'none';
$("#example").DataTable({
data: persons,
"columns": [{
"data": "id"
},
{
"data": "username"
},
{
"data": "email"
},
{
"data": "avatar"
}
]
});
}
};
xmlhttp.send();
$('#example').Tabledit({
url: 'action.php',
dataType: 'json',
eventType: 'dblclick',
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [
[1, 'username'],
[2, 'email']
]
}
});
});
</script>
</head>
<body>
<div class="container">
</div>
<div class="container">
<table id="example" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
You can re-structure how your DataTable calls its Ajax data, by using the DataTables built-in support for Ajax.
You can then apply the Tabledit functionality to the resulting DataTable, using the initComplete option.
$(document).ready(function() {
var baseurl = "https://run.mocky.io/v3/391adcbb-160c-4111-b853-2e273700676b";
$("#example").DataTable({
ajax: {
url: baseurl,
dataSrc: ""
},
columns: [{
data: "id"
},
{
data: "username"
},
{
data: "email"
},
{
data: "avatar"
}
],
initComplete: function(settings, json) {
$('#example').Tabledit({
//url: 'action.php',
dataType: 'json',
eventType: 'dblclick',
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [
[1, 'username'],
[2, 'email']
]
}
});
}
});
});
<html>
<head>
<title>Person Information</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
</head>
<body>
<div class="container">
</div>
<div class="container">
<table id="example" style="width:100%">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</thead>
<tfoot>
<tr>
<th>id</th>
<th>username</th>
<th>email</th>
<th>avatar</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Now, if you run the above code snippet, and then double-click on a value in the username or email columns, the cell will become editable.
Note - I commented out your action.php option because I do not have that file. So, edits are not sent/saved anywhere.
I'm trying to use a bootstrap table with an ajax request like in this example:
https://examples.bootstrap-table.com/#options/table-ajax.html
But, like in the example, my data don't load and I only get a message saying "Loading, please wait...".
I tried to hide the message by using bootstrapTable('hideLoading'); but then I only get "No matching records found".
Do you have some ideas why either the example on the official website is not working ?
View some code:
function ajaxRequest(params) {
$.ajax({
type: "GET",
url: "getAjax.php",
dataType: "json",
success: function(data) {
params.success({
"rows": data,
"total": data.length
})
},
error: function(er) {
params.error(er);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-toggle="table" data-detail-view="true" data-detail-view-icon="false" data-detail-view-by-click="true" data-ajax="ajaxRequest" data-detail-formatter="detailFormatter" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" class="table table-bordered table-sm table-hover table-responsive"
id="rtcapi">
<thead class="thead-light">
<tr>
<th data-field="id">#</th>
<th data-field="status">Status</th>
<th data-field="ln_demander">Last name</th>
<th data-field="fn_demander">First name</th>
</tr>
</thead>
I tried to console.log some tests in the js function and it seems it isn't called by the html...
Thank you for your answers !
Did you add Bootstrap and table JS?
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
Yes, I added all these css and js scripts :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css">
<link href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Please add
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
after jquery.min.js
function ajaxRequest(params) {
$.ajax({
type: "GET",
url: "getAjax.php",
dataType: "json",
success: function(data) {
params.success({
"rows": data,
"total": data.length
})
},
error: function(er) {
params.error(er);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
<table data-toggle="table" data-detail-view="true" data-detail-view-icon="false" data-detail-view-by-click="true" data-ajax="ajaxRequest" data-detail-formatter="detailFormatter" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" class="table table-bordered table-sm table-hover table-responsive"
id="rtcapi">
<thead class="thead-light">
<tr>
<th data-field="id">#</th>
<th data-field="status">Status</th>
<th data-field="ln_demander">Last name</th>
<th data-field="fn_demander">First name</th>
<th data-field="date_request">Date request</th>
<th data-field="name">Name application</th>
<th data-field="irn">IRN</th>
<th data-field="internal">Internal/External</th>
<th data-field="description">Description</th>
<th data-field="users">Users</th>
<th data-field="country">Country</th>
<th data-field="valid_proof">Validation</th>
<th data-field="date_prod">Date for prod</th>
</tr>
</thead>
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 -.-
I want to populate a datatable from a php call in my $(document).ready function, but I don't want to configure the table for server side processing (I want subsequent sorting/filtering/sorting to happen client side). Below is my current code. Note: I ran the php On the server and pasted the output into a text file. If I use the path to the text file as my url, I get the intended result. So I think that datatables is trying to read my php file as json, and, of course failing. How do I get it to use the output from the php file instead of the php file itself?
Code:
<html>
<head>
<title>NCompass Failed Fax Monitor</title>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#faxList').DataTable({
ajax: {
url: 'php/Data.php',
dataSrc: 'transactions'
},
columns: [
{ data: 'PROCESS_DATE' },
{ data: 'PROCESS_STATUS' },
{ data: 'PDF_FILE_NAME' },
{ data: 'REF_ID' },
{ data: 'ADDITIONAL_INFO' }
]
});
});
</script>
</head>
<body>
<h2>NCompass Failed Fax Monitor</h2>
<br>
<table width="100%" class="display" cellspacing="0" id="faxList">
<thead>
<tr>
<th>Process Date</th>
<th>Status</th>
<th>PDF File</th>
<th>Reference ID</th>
<th>Error Description</th>
</tr>
</thead>
</table>
</body>
</html>
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>