I have a >50000 SharePoint Online document library list being rendered using the working code below. The page load time is close to 10-15 seconds.
I tried to implement server side processing to reduce page load times, but it made no difference:
"processing": true, "serverSide": true,
<!DOCTYPE html>
<html">
<head>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/moment.min.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/datetime-moment.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/jszip.min.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/pdfmake.min.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/vfs_fonts.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/buttons.print.min.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="<SPO_SITE>/SiteAssets/js/dataTables.searchBuilder.min.js"></script>
<link rel="stylesheet" type="text/css" href="<SPO_SITE>/SiteAssets/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="<SPO_SITE>/SiteAssets/css/dataTables.jqueryui.min.css">
<link rel="stylesheet" type="text/css" href="<SPO_SITE>/SiteAssets/css/buttons.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="<SPO_SITE>/SiteAssets/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="<SPO_SITE>/SiteAssets/css/searchBuilder.dataTables.min.css">
<script>
$(document).ready(function() {loadItems();});
function loadItems() {
var siteUrl = _spPageContextInfo.siteAbsoluteUrl;
var oDataUrl = siteUrl + "/_api/web/lists/getbytitle('LIST_NAME')/items?$top=200000&$select=Created,ATA,EncodedAbsUrl";
$.ajax({
url: oDataUrl,
type: "GET",
dataType: "json",
headers: {
"accept": "application/json;odata=verbose"
},
success: mySuccHandler,
error: myErrHandler
});
}
function mySuccHandler(data) {
try {
$('#table_id').DataTable({
"pageLength": 100,
"dom": 'Bfrtip',
"buttons": [ {extend: 'searchBuilder', config: {columns: [0,1,2,3,4,5,6,7],},}, 'copy', 'csv', 'pdf', {extend: 'print',exportOptions: {columns: [ 0, 1, 2, 3, 4, 5, 6, 7 ]}} ],
"aaData": data.d.results,
"aaSorting": [[0, "desc"]],
"aoColumns": [
{
"mData": "Created"
},
{
"mData": "ATA"
},
{
"mData": "EncodedAbsUrl",
"mRender": function ( data, type, full )
{return 'View';}
}
]
});
} catch (e) {
alert(e.message);
}
}
function myErrHandler(data, errMessage) {
alert("Error: " + errMessage);
}
</script>
</head>
<body>
<div>
<table id="table_id" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Uploaded</th>
<th>ATA</th>
<th></th>
</tr>
</thead>
</table>
</div>
</body>
</html>
You have to set backend code because serverside means you have to handle Datatable rows on server on each action on client side (change page , filter , search , ...)
For more informations here : https://datatables.net/examples/data_sources/server_side
Related
I put it in the variable already but it still gives me an error and it says uncaught reference error oTable is not defined
<script type="text/javascript">
$(document).ready(function(){
$("#test").click(function(){
$.ajax({
url: "https://jsonplaceholder.typicode.com/posts",
success: function( result ) {
var oTable = $("#datatable").DataTable({
processing: true,
data: result,
columns: [
{data: 'id'},
{data: 'title'}
]
});
}
});
});
$("#reload").click(function(){
oTable.DataTable().ajax.reload();
});
});
</script>
here is my html
<table id="datatable">
<thead>
<tr>
<th>ID</th>
<th>TITLE</th>
</tr>
</thead>
</table>
please help me Thanks
Hope this will work for you
Use Datatable Method to Load ajax,
No need to Initiate again to reload Datatble use oTable.ajax.reload();
I changed oTable to Global variable
$(document).ready(function () {
$("#reload").click(function () {
oTable.ajax.reload();
});
$("#test").click(function () {
window.oTable = $('#datatable').DataTable({
"ajax": {
"url": "https://jsonplaceholder.typicode.com/posts",
"dataSrc": ""
},
"columns": [{
"data": "id"
},
{
"data": "title"
},
]
});
});
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type='text/javascript'>
</script>
</head>
<body>
<button id="reload">
reaload
</button>
<button id="test">
test
</button>
<div class="container">
<table id="datatable">
<tr>
<th>ID</th>
<th>TITLE</th>
</tr>
</thead>
</table>
</div>
your oTable variable definition was on onSuccess callback, so it can't call from outside of onSuccess callback scope
I have been trying to integrate a table into my website which pulls data from my database into the table on the website.
I have read all the possible solutions on the internet and couldnt fix the issue yet.
I am putting my code below to have a look.
Please point out where I'm goiing wrong in it and what can i do for it to work.
Otherwise suggest me another option to go for the same function of loading data from the database into the tables inti the HTML site.
The declarations that i have used before the code.
<!--Import jQuery before export.js-->
<script type="text/javascript" src="//code.jquery.com/jquery.js"></script>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<!--Data Table-->
<script type="text/javascript" src=" //cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src=" //cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<!--Export table buttons-->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js" ></script>
<script type="text/javascript" src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<!--Export table button CSS-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
This is my HTML code.
<div style="width:90%; margin:0 auto;">
<table id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
</table>
</div>
This is my Javascript code.
<script>
$(document).ready(function () {
$('#myTable').DataTable({
"ajax": {
"url": "/api/medical_inventory/",
"type": "GET",
"datatype": "json"
},
"columns" : [
{ "data": "Id", "autoWidth": true },
{ "data": "Name", "autoWidth": true },
]
});
});
</script>
Any help is appreciated.
Thanks in advance.
You probably want to have the ajax call actually return data, and then pass that on to DataTable. As an example:
$.ajax({
url: "/api/medical_inventory/",
type: "GET",
datatype: "json",
success: function(data){
$("#myTable").DataTable({
data: data,
columns : [
{ title: "Id", className: "myClass" },
{ title: "Name", className: "otherClass" },
]
});
}
});
I have to make a work with the trello API, but I'm getting error 400 (invalid token) and I have no idea why.
This is my code (I have replaced my actual key with mykey)
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://trello.com/1/client.js?key=mykey"></script>
<script type="text/javascript">
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication"); },
error: function() { console.log("Failed authentication"); }
});
</script>
</html>
You should put all your code logic inside document.ready, so the entire document will be ready and then only you will get the popup for authentication / authorization. you can get a valid app key here : https://trello.com/app-key See the code example :
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
<div id="loggedin">
<div id="header">
Logged in to as <span id="fullName"></span>
</div>
<div id="output"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://api.trello.com/1/client.js?key=[appKeygoeshere]"></script>
<script type="text/javascript">
$(window).load(function(){
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication");
Trello.members.get("me", function(member){
$("#fullName").text(member.fullName);
var $cards = $("<div>")
.text("Loading Cards...")
.appendTo("#output");
// Output a list of all of the cards that the member
// is assigned to
Trello.get("members/senthil192/cards/all", function(cards) {
$cards.empty();
$.each(cards, function(ix, card) {
//alert(card.name);
$("<a>")
.attr({href: card.url, target: "trello"})
.addClass("card")
.text(card.name)
.appendTo($cards);
});
});
});
},
error: function() { console.log("Failed authentication"); }
});
});
</script>
</html>
code ref url : http://jsfiddle.net/danlec/nNesx/
I am using the jQuery DataTable for creating a web page. I have a use case where the page opens with the table already populated. Now, there is a form in the page where he can put some filters and refresh the table. Also, more importantly for each row, I can expand to see more details as explained here.
In my case, as soon as the data is reloaded after the form is submit, the details button which would expand each data row stops working. It gives the following error:
jquery.dataTables.min.js:120 Uncaught TypeError: Cannot read property '_detailsShow' of undefined
I am reloading thee table by first clearing, destroying and then calling the DataTable method. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="../../../static/css/chosen/bootstrap-chosen.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../../static/js/bootstrap/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(
function ()
{
var dashboard_table_id = "#example";
function destroy_existing_data_table()
{
var existing_table = $(dashboard_table_id).dataTable();
if (existing_table != undefined)
{
existing_table.fnClearTable();
existing_table.fnDestroy();
}
}
function create_dashboard_table()
{
var data_table = $(dashboard_table_id).DataTable({
"data": [{
"dt_RowId": 10,
"column1": "delhivery",
"column2": "CRP12345",
"column3": "1122",
"column4": "One expanded row"
}, {
"dt_RowId": 2,
"column1": "delhivery",
"column2": "CRP12345",
"column3": "1122",
"column4": "Other expanded row"
}],
"columns": [
{"className": "select-checkbox", orderable: false, "data": null, "defaultContent": ""},
{"class": "details-control", "orderable": false, "data": null, "defaultContent": ""},
{"data": "column1"},
{"data": "column2"},
{"data": "column3"}
],
"buttons": {},
"dom": 'lBfrtip',
"select": {
"style": 'multi',
"selector": 'td:first-child'
},
"oLanguage": {"sSearch": ""},
"order": [[2, 'asc']],
"bLengthChange": false,
"pageLength": 25
});
// adding event listener for opening and closing details
$(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',
function ()
{
var tableRow = $(this).closest('tr');
var row = data_table.row(tableRow);
if (row.child.isShown())
{
tableRow.removeClass('details');
row.child.hide();
}
else
{
var rowData = row.data();
tableRow.addClass('details');
row.child("Hello there, this is the expanded view I am referring to....").show();
}
});
}
$("#example-form-submit").click(function (event)
{
event.preventDefault();
destroy_existing_data_table();
create_dashboard_table();
});
create_dashboard_table();
});
</script>
<style>td.details-control {
background: green;
cursor: pointer;
}
tr.details td.details-control {
background: blue;
}</style>
</head>
<body>
<div class="main-content lfloat">
<div class="container" style="width: 100%;">
<label for="example-form-submit" class="col-md-2 control-label"></label>
<div class="col-md-2">
<button type="submit" id="example-form-submit" class="btn btn-primary">Refresh and try to expand</button>
</div>
<div>
<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th></th>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
Can some one please point out what I am doing wrong. Thanks a ton in advance. This has been bugging me for some time now.
JSFiddle : Credits: #Edis Golubich
it works for me. just remove the latest click event handler by add .off before add the new one.
$(dashboard_table_id).find('tbody').off('click', 'tr td.details-control');
$(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',function(){...});
The issue is that the data_table object is not getting 'updated' when using jQuery.on() via delegated event handling.
Try this: https://jsfiddle.net/f5mdcrup/4/
What I did was declare data_table outside of the function. The scope will be different in this case.
Following code works for me
$(dashboard_table_id).find('tbody').off('click', 'tr td.details-control');
$(dashboard_table_id).find('tbody').on('click', 'tr td.details-control',function(){
//Action To perform
});
i'm try data show in datatables
https://datatables.net/
i can show data from MYSQL to Datatables,
but i want column in datatables show all
This image, you can see there 1 column, must be click button plus, if show many column.
i already search, enable scroll X in datatables
https://datatables.net/examples/basic_init/scroll_x.html
and when i put code
"scrollX": true in my code
and add jquery
https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js
this result like this, you can see my input search in bottom has been disabled. and my template datatables does not work. i'm confused to fix it :(
i want to show all my data, with scroll-x and template datatables, search bottom, still work.
Online Demo Test : http://gajelos.tk/test/index.php
This is my code
<HTML>
<HEAD>
<!-- JQUERY -->
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- BOOTSTRAP -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="assets/media/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/media/css/dataTables.responsive.css">
<script type="text/javascript" language="javascript" src="assets/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="assets/media/js/dataTables.responsive.js"></script>
<script type="text/javascript" language="javascript" src="assets/media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" language="javascript" src="assets/media/js/common.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js "></script>
</HEAD>
<BODY>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<button onClick="showModals()" class="btn btn-primary">Tambah Data</button>
<br>
<hr>
<br>
<table id="example" cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
<thead>
<tr>
<th>Action</th>
<th>SIM</th>
<th>Nama</th>
<th>Berlaku (SIM)</th>
<th>Jenis</th>
<th>Plat Nomor</th>
<th>Berlaku (Kendaraan)</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<th>Action</th>
<th>SIM</th>
<th>Nama</th>
<th>Berlaku (SIM)</th>
<th>Jenis</th>
<th>Plat Nomor</th>
<th>Berlaku (Kendaraan)</th>
</tfoot>
</table>
</div>
</div>
</div>
<script type="text/javascript" language="javascript" >
var dTable;
// #Example adalah id pada table
$(document).ready(function() {
dTable = $('#example').DataTable( {
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": false,
"responsive": true,
"sAjaxSource": "serverSide.php", // Load Data
"scrollX": true,
"sServerMethod": "POST",
"columnDefs": [
{ "orderable": false, "targets": 0, "searchable": false },
{ "orderable": true, "targets": 1, "searchable": true },
{ "orderable": true, "targets": 2, "searchable": true },
{ "orderable": true, "targets": 3, "searchable": true },
{ "orderable": true, "targets": 4, "searchable": true },
{ "orderable": true, "targets": 5, "searchable": true },
{ "orderable": true, "targets": 6, "searchable": true }
]
} );
$('#example').removeClass( 'display' ).addClass('table table-striped table-bordered');
//$('#example tfoot tr th').each( function () {
var i = 0;
$('.table').find( 'tfoot tr th' ).each( function () {
//Agar kolom Action Tidak Ada Tombol Pencarian
if( $(this).text() != "Action" ){
var width = $(".sorting_1").width();
var title = $('.table thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" class="form-control" style="width:'+width+'" />' );
}
i++;
} );
// Untuk Pencarian, di kolom paling bawah
dTable.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
that
.search( this.value )
.draw();
} );
} );
} );
</script>
</BODY>
</HTML>
help me, thank's