Bottom Search disable when enable Scroll X in DataTables - javascript

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

Related

Server side processing Jquery Datatables Sharepoint

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

jQuery Datatables buttons showing as links.. not buttons

Using jQuery DataTables 1.10.15 and I am trying to use the file export options.
Here is how my scripts are loaded on the page:
<script src="/Scripts/DataTables/jquery.dataTables.js"></script>
<script src="/Scripts/DataTables/dataTables.bootstrap.js"></script>
<script src="/Scripts/DataTables/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
Here is my DataTable setup:
var table = $('#NewTable').DataTable({
dom: 'Bfrtip',
buttons: [ 'excel', 'pdf' ],
'aoColumnDefs': [
{ "bSortable": false, "aTargets": [2, 7] },
{ "bSearchable": false, "aTargets": [7] }
]
});
Here is how they appear:
How do I get them to appear as buttons and not links?
You're most likely missing the proper css file.
Try adding this css link (from CDN) to your header.
https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css
Working example:
var table = $('#NewTable').DataTable({
dom: 'Bfrtip',
buttons: [ 'excel', 'pdf' ],
'aoColumnDefs': [
{ "bSortable": false, "aTargets": [2, 7] },
{ "bSearchable": false, "aTargets": [7] }
]
});
<link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
<table id="NewTable"></table>

$(...).DataTable is not a function even after including the js before dataTable

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" },
]
});
}
});

Unable to expand rows after destroy and reload; Cannot read property '_detailsShow' of undefined;

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
});

how to disable sorting effect on the first column of a datatable

In the datatable construct given below, if the column headers are clicked, the table content gets sorted with respect to the column which is clicked. I want to remove this sorting functionality from the first column i.e Name is clicked, no sorting would happen. I have tried few mechanisms but none of them seems to be working. Can anybody please suggest a solution ?
The code goes below :
$(document).ready(function() {
$('#table_1').DataTable({
"columns": [
{ "width": "1%" },
null,
null,
null,
],
"paginate": false,
// "scrollY": "475px",
// "scrollX": "100%",
"bSort" : true,
bFilter: true,
bInfo: true,
"scrollCollapse": true,
"dom": '<"toolbar">frtip',
"oLanguage": {
"sSearch": "Search"
},
"sScrollY": "200px",
"bAutoWidth": false,
/*"columnDefs": [
{ "orderable": false, "targets": 0 },
// { targets: 'no-sort', orderable: false },
], */
});
});
<html>
<head>
<script type="text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
<table id="table_1" name="table_1" class="display cell-border compact" cellspacing="0" border ="1" align = "center" width="10%">
<thead>
<tr bgcolor= "blue">
<th align=right>Name</th>
<th align=right>Place</th>
<th align=right>D.O.J</th>
<th align=right>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td align=right>John</td>
<td align=right>Bristol</td>
<td align=right>03-09-2015</td>
<td align=right>999999</td>
</tr>
<tr>
<td align=right>Mark</td>
<td align=right>Leeds</td>
<td align=right>03-06-2015</td>
<td align=right>9999777</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>
<script type="text/javascript" src ="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src ="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src ="https://cdn.datatables.net/buttons/1.1.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" src ="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src ="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src ="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
</head>
<body>
<style>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css"/>
</style>
</body>
</html>
Just for the variation.
You could also go the html attribute route and do this
<th data-orderable="false">...</th>
To the column you would like to disable from being sortable
Note that you should also set the oder by the way you want to if you are interested
<table data-order='[[1, "asc"]]' ...
This is a method I usually do when working with partials / views without a proper templating engine
the bSortable indicated in the definition of columns, try this ..
$(document).ready(function() {
$('#table_1').DataTable({
"columns": [
{ "width": "1%" },
null,
null,
null,
],
"paginate": false,
// "scrollY": "475px",
// "scrollX": "100%",
"bSort" : true,
bFilter: true,
bInfo: true,
"scrollCollapse": true,
"dom": '<"toolbar">frtip',
"oLanguage": {
"sSearch": "Search"
},
"aaSorting": [[ 1, "asc" ]],
"sScrollY": "200px",
"bAutoWidth": false,
"columnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
});
});

Categories