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>
Related
[![enter image description here][1]][1]
this is my JavaScript code and My footer references and Header references. Issue is with my design on first place it showing bug design but when I click on header its showing the right design.
<link rel="stylesheet" href="~/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#700;800;900&display=swap" rel="stylesheet">
<!--fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/font/font/flaticon.css">
<link rel="stylesheet" href="~/css/StyleSheet.css">
$(document).ready(function () {
$('#draft-data-table').DataTable({
processing: true, // for show progress bar
serverSide: false, // for process server side
filter: true, // this is for disable filter (search box)
orderMulti: false, // for disable multiple column at once
"pagingType": "full_numbers",
pageLength: 5,
lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
deferRender: true,
paging: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
});
});```
```<script src="~/js/jquery-3.5.1.js"></script>
<script src="~/js/popper.min.js" ></script>
<script src="~/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="~/libt/signalr/dist/browser/signalr.js"></script>```
[1]: https://i.stack.imgur.com/9hcOx.png
From research on the issue, this is happening because you have scrollY enabled, but do not enable scrollX.
If you are using vertical scrolling (scrollY) and not horizontal scrolling
(scrollX), enable the horizontal scrolling option so the table has space to scroll into.
After you enable the scrollX option, add the following to your CSS stylesheet:
table.dataTable tbody th,
table.dataTable tbody td {
white-space: nowrap;
}
$(document).ready(function () {
var table = $('#draft-data-table').DataTable({
processing: true, // for show progress bar
serverSide: false, // for process server side
filter: true, // this is for disable filter (search box)
orderMulti: false, // for disable multiple column at once
"pagingType": "full_numbers",
pageLength: 5,
lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
deferRender: true,
paging: true,
scrollY: 200,
scrollX: true,
scrollCollapse: true,
scroller: true,
});
});
<head>
<!--Styles-->
<link rel="stylesheet" href="~/css/bootstrap.min.css" >
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#700;800;900&display=swap" rel="stylesheet">
<!--fontawesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.11.1/css/jquery.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/font/font/flaticon.css">
<link rel="stylesheet" href="~/css/StyleSheet.css">
<!--Scripts-->
<script src="~/js/jquery-3.5.1.js"></script>
<script src="~/js/popper.min.js" ></script>
<script src="~/js/bootstrap.min.js" ></script>
<script src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>
</head>
Another work around, would be to use the columns.adjust() reference documented here on the DataTables website.
What this recalculate the column widths of the table. Make sure you call the table.columns.adjust().draw(); after your table initialization
$(document).ready(function () {
var table = $('#draft-data-table').DataTable({
processing: true, // for show progress bar
serverSide: false, // for process server side
filter: true, // this is for disable filter (search box)
orderMulti: false, // for disable multiple column at once
"pagingType": "full_numbers",
pageLength: 5,
lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
deferRender: true,
paging: true,
scrollY: 200,
scrollX: true,
scrollCollapse: true,
scroller: true,
});
table.columns.adjust().draw();
});
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
I'm fetching cshtml in my .net project through ajax, after biding data to dom successfully, initializing datatable on it with export to excel feature,
but when you fetch data more than a time (user using filers), datatable is binding (appending) event to export button every time, and user ends up downloading multiple excel files at once.
I have replicated cshtml and ajax method with data and getCSHTML methods.
Steps to reproduce issue.
Click on Get Data button.
Click on Export Data button (Only one file will be downloaded).
Go back to step 1 and 2, repeat it without refreshing the browser tab, you will end up downloading multiple excel file on a single click.
I have tried, .off() , .unbind() and .bind(), but no help.
var data = '<table id="example"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th></tr></thead><tbody><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td></tr><tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td></tr></tbody></table>'
function getCSHTML() {
$("#masterPage").html(data);
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"initComplete": function() {
var $buttons = $('.dt-buttons').hide();
if ($('#exportLink').length > 0) {
$('#exportLink').on('change', function() {
var btnClass = $(this).find(":selected")[0].id ?
'.buttons-' + $(this).find(":selected")[0].id :
null;
if (btnClass) $buttons.find(btnClass).click();
})
}
$('#exportToExcel').on('click', function() {
$('.buttons-excel').click()
})
},
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/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://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<button onclick="getCSHTML()">Get Data</button>
<button id="exportToExcel">Export Data</button>
<div id="masterPage"></div>
You need to unbind at the start of your function with this line
$("#exportToExcel").unbind("click")
Example :
var data = '<table id="example"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th></tr></thead><tbody><tr><td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td></tr><tr><td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>28</td><td>2011/06/07</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td></tr><tr><td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td></tr></tbody></table>'
function getCSHTML() {
$("#masterPage").html(data);
$("#exportToExcel").unbind("click"); // unbind here
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"initComplete": function() {
var $buttons = $('.dt-buttons').hide();
if ($('#exportLink').length > 0) {
$('#exportLink').on('change', function(e) {
var btnClass = $(this).find(":selected")[0].id ?
'.buttons-' + $(this).find(":selected")[0].id :
null;
if (btnClass) $buttons.find(btnClass).click();
})
}
$('#exportToExcel').on('click', function(e) {
$('.buttons-excel').click()
})
},
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/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://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<button onclick="getCSHTML()">Get Data</button>
<button id="exportToExcel">Export Data</button>
<div id="masterPage"></div>
Try to move export function outside of initComplete it works like a charm
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
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 ] }
],
});
});