I have just gotten started with datatables and I was working with this example from the datatables docs, but I can't get the data to display .
This is the .html file:
<html>
<head>
<title>data</title>
<script href="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script href="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<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>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"ajax": 'arrays.txt'
} );
} );
</script>
</body>
</html>
and this is the arrays.txt file:
{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
]
]
}
The problem is that no data is displayed in the datatable.
You are importing datatable before jquery.
Since datatable requires jQuery, you must load jQuery first.
Also you should never import scripts on head. Put it on the end of your body tag, before the script tags.
Related
I am trying to use the below example from datatables : https://datatables.net/examples/data_sources/js_array.html , but when i am trying to retrieve data from a url as map , it is giving me error.
Below is the html code for this , i am hitting a mock api to get the object then iterating to get the object that datatable expect as input .
<html>
<head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var completeObject = {} ;
var employeeArray = [] ;
$.getJSON('https://run.mocky.io/v3/3a65891c-84c8-467e-b2e9-ecb1629e1c45', function(json_data){
$.each(json_data, function(k, v) {
var tem_arr = [] ;
tem_arr.push(v['name']);
tem_arr.push(v['position']);
tem_arr.push(v['office']);
tem_arr.push(v['extn']);
tem_arr.push(v['start_date']);
employeeArray.push(tem_arr);
});
console.log('check inner >>' + JSON.stringify(employeeArray) );
$('#example').DataTable({
data: employeeArray ,
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'salary' },
{ data: 'office' },
{ data: 'extn' },
{ data: 'start_date' },
],
});
});
});
</script>
</head>
<body>
<div class="container">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
I have a simple html table. The pagination is off so all 50 rows or so display on the page. The excel export works great. The PDF export only displays 1 page which is about one third of the content. Is there a simple way of exporting all rows? Even with the pagination set to true, the export is still incomplete. After doing some research, what I have should be working. I just can't figure out why its failing and exporting only one page.
<script>
$(document).ready(function() {
$('#summary_table').DataTable( {
dom: 'Bfrtip',
buttons: [
'excelHtml5',
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize:'LEGAL'
}
],
paging:false
} );
} );
</script>
The html has this structure
<table class="display">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
.
.
.
</table>
I don't know about your included js and css. You can try this. Here is a working demo
<table id="example" class="display nowrap" 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>
<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>
</table>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
paging: false
} );
} );
And don't forget to include these files
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js
//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js
//cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js
https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css
the datatables site has examples with the below pdfmake CDN's
<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>
I removed the above from my code and replaced with 0.1.32 version through cdnjs instead. PDF button produced a full export of all pages now!
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
Set Page Setting before Export .
protected void btnSubmit_Click(object sender, EventArgs e)
{
WebClient wc = new WebClient();
string url = Request.Url.AbsoluteUri;
string fileContent = wc.DownloadString(url);
List<string> tableContents = GetContents(fileContent, table_pattern);
string HTMLString = String.Join(" ", tableContents.ToArray());
Document pdfDoc = new Document(PageSize.A4, 10f, 10f, 10f, 0f);
PdfWriter.GetInstance(pdfDoc, Response.OutputStream);
pdfDoc.Open();
pdfDoc.Add(new Paragraph("Welcome to dotnetfox"));
List<IElement> htmlarraylist = HTMLWorker.ParseToList(new StringReader(HTMLString), null);
for (int k = 0; k < htmlarraylist.Count; k++)
{
pdfDoc.Add((IElement)htmlarraylist[k]);
}
pdfDoc.Close();
Response.ContentType = "application/pdf";
Response.AddHeader("content-disposition", "attachment;" +
"filename=sample.pdf");
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Write(pdfDoc);
Response.End();
}
}
Here is my screenshot :
This is my following code:
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
</tr>
</tbody>
</table>
<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 src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'My button',
action: function ( e, dt, node, config ) {
alert( 'Button activated' );
}
}
]
} );
} );
</script>
I'm trying to use this code from https://datatables.net/extensions/buttons/custom. I dont why my button button didn't show up. I was wondering why this code is not working. Can anyone please tell me how to use 'jQuery DataTables Button'?
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
you have script error. try this one.
Screenshot:
http://prntscr.com/eazm0r
You have not properly closed script tag you have a missing > from below script tag
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
I have one table which has 7 columns. Below is the HTML code:
<table id="multiple-account-table" cellpadding="0" cellspacing="0">
<thead>
<tr class="border-class">
<th>Employee Name</th>
<th>Account Number</th>
<th>Account Name</th>
<th>Alias</th>
<th>Due Date</th>
<th>Total Due</th>
<th>Payment Amount</th>
</tr>
</thead>
</table>
Now My requirement is, when I click on table header, that particular border should have thick border at the bottom. And when user will click on some other table header then that border should remove from previous table header and apply on currently clicked table header. Something like below image:
Click here to see image
I wrote this jQuery code:
$(document).on('click', 'thead', function () {
$(this).addClass('sort-border');
});
Below is my CSS class for sort-border:
.sort-border {
border-bottom: 4px solid black;
}
It works fine. But when I click on some other table header then previously clicked table header's border doesnt remove. Any suggestion?
If you first try to remove the class on any header, that should have the class, you will only have one header with the sort-border class.
$(document).on('click', 'th', function () {
$('th.sort-border').removeClass('sort-border');
$(this).addClass('sort-border');
});
Also, the thead would give the border to the whole line, if you select the th, it would only be that cell with the border.
$(document).on('click', 'thead', function () {
$('thead').removeClass('sort-border');
$(this).addClass('sort-border');
});
.sort-border {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="multiple-account-table" cellpadding="0" cellspacing="0">
<thead>
<tr class="border-class">
<th>Employee Name</th>
<th>Account Number</th>
<th>Account Name</th>
<th>Alias</th>
<th>Due Date</th>
<th>Total Due</th>
<th>Payment Amount</th>
</tr>
</thead>
</table>
<table id="multiple-account-table" cellpadding="0" cellspacing="0">
<thead>
<tr class="border-class">
<th>Employee Name</th>
<th>Account Number</th>
<th>Account Name</th>
<th>Alias</th>
<th>Due Date</th>
<th>Total Due</th>
<th>Payment Amount</th>
</tr>
</thead>
</table>
do something like this:
$(document).ready(function(){
$('.border-class th').on('click'.function(){
$('.border-class th').removeClass('sort-border');
$(this).addClass('sort-border');
});
});
thead is parent of the column header(th) you want to modify, so you need to be specific on it.
"thead th"
Your JavaScript should now be like,
$(document).on('click', 'thead th', function () {
$(this).addClass('sort-border').siblings().removeClass('sort-border');
});
Adding the class to the column, then removing it from his siblings(other headers)
jsFiddle DEMO
I am facing a problem while creating a table using Mushtache.js
View file:
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th class="header">Name</th>
<th class="header">Email ID</th>
<th class="header">Contact Number</th>
<th class="header">Edit</th>
</tr>
</thead>
<tbody>
<div id="eTableList"></div>
<script id="eList" type="text/template">
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
</script>
</tbody>
</table>
JS code:
function createTable(jsonEData){
var template = $("#eList").html();
expList = Mustache.render(template, jsonEData);
$("#expertTableList").html(expList);
}
I am calling this method as
<script language="javascript">
$(document).ready(function(){
createTable(<?php echo $this->eList;?>);
})
</script>
and the value of $this->eList = jsonEData is
[
{
"id": "52d3d523bdde226f17a581ba",
"name": "shgajsah",
"email": "0",
"contact_number": 2147483647
},
{
"id": "52d3d5c8bdde22c817a581ba",
"name": "fffsdf",
"email": "asa#ddjdj.com",
"contact_number": 323323232
}
]
I am not getting any error but table is not getting populated using above code. So please tell me where I am doing wrong?
You're not iterating over your items, give this a shot:
{{#.}}
<tr>
<td>{{name}}</td>
<td>{{email}}</td>
<td>{{contact_number}}</td>
<td>View/Edit</td>
</tr>
{{/.}}
or perhaps:
{{#each .}}
<tr> ... </tr>
{{/each .}}