DataTables jquery plugin not working, get a blank page?

DataTables jquery plugin not working, get a blank page? - javascript

I am trying to implement the Datatables jquery plugin on with my html table but having no luck. I'm linking to the Datatables CDN for both the CSS styling and Datatables script itself, while linking to Google's hosted jquery plugin. I also have a local Javascript file with the script to initialize data tables on my table. I go to open the html page and just get my plain table as if DataTable isn't even functioning. What could I be doing wrong?
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatables.js"></script>
<table id="mytable">
<table>
<thead>
<tr>
<th>High-Level Category</th>
<th>Device Type</th>
<th>Hostname</th>
<th>IP Address</th>
<th>Owner</th>
<th>Organizational Unit</th>
<th>Organizational Unit Email</th>
<th>Universal Forwarder or Syslog?</th>
<th>In PCI?</th>
<th>Notes</th>
</tr>
</thead>
<tbody contenteditable>
<tr>
<td contenteditable="true">SECDEV1</td>
<td contenteditable="true">Firewall</td>
<td contenteditable="true">Description 1</td>
<td contenteditable="true">1.1.1.1</td>
<td contenteditable="true">Kim</td>
<td contenteditable="true">Information Technology</td>
<td contenteditable="true">test#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">Yes</td>
<td contenteditable="true">notes</td>
</tr>
<tr>
<td contenteditable="true">SECDEV2</td>
<td contenteditable="true">Switch</td>
<td contenteditable="true">description2</td>
<td contenteditable="true">2.2.2.2</td>
<td contenteditable="true">Bob</td>
<td contenteditable="true">Information Networking</td>
<td contenteditable="true">test2#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">NO</td>
<td contenteditable="true">more notes</td>
</tr>
</tbody>
The local js file I have is as follows:
$(document).ready(function(){
$('#mytable').dataTable();
});
Any help would be great.
Thanks!

Your html code is incorrect. There was an extra open ending table tag. I corrected your html below:
<table id="mytable">
<thead>
<tr>
<th>High-Level Category</th>
<th>Device Type</th>
<th>Hostname</th>
<th>IP Address</th>
<th>Owner</th>
<th>Organizational Unit</th>
<th>Organizational Unit Email</th>
<th>Universal Forwarder or Syslog?</th>
<th>In PCI?</th>
<th>Notes</th>
</tr>
</thead>
<tbody contenteditable>
<tr>
<td contenteditable="true">SECDEV1</td>
<td contenteditable="true">Firewall</td>
<td contenteditable="true">Description 1</td>
<td contenteditable="true">1.1.1.1</td>
<td contenteditable="true">Kim</td>
<td contenteditable="true">Information Technology</td>
<td contenteditable="true">test#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">Yes</td>
<td contenteditable="true">notes</td>
</tr>
<tr>
<td contenteditable="true">SECDEV2</td>
<td contenteditable="true">Switch</td>
<td contenteditable="true">description2</td>
<td contenteditable="true">2.2.2.2</td>
<td contenteditable="true">Bob</td>
<td contenteditable="true">Information Networking</td>
<td contenteditable="true">test2#test.com</td>
<td contenteditable="true">Syslog</td>
<td contenteditable="true">NO</td>
<td contenteditable="true">more notes</td>
</tr>
</tbody>
</table>

To achieve your expected result, use below CDN libraries
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
Codepen- http://codepen.io/nagasai/pen/AXyLXO

Related

Is there a way to use JavaScript Object with Bootstrap Tables

I am trying to create a covid-19 tables with bootstrap tables I want to display cases newcases death newdeath, But I'm not sure if I can use JavaScript Object to display number.
I add the script <script src="/module/index.js"></script> after the footer.
Github Repo: https://github.com/drjoeycadieux/covid-virus.git
index.js
document.getElementById("cases").innerHTML = cases;
document.getElementById("newCases").innerHTML = newCases;
document.getElementById("death").innerHTML = death;
document.getElementById("newDeath").innerHTML = newDeath;
const dailyOverview = [
{
date: '2021-09-09',
cases: 395155,
newCases: 703,
death: 11297,
newDeath: 1,
},
];
index.html
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Covid-19 Canada</th>
<th scope="col">Quebec</th>
<th scope="col">Ontario</th>
<th scope="col">Manitoba</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Cases</th>
<td id="cases"></td>
<td id="newCases"></td>
<td id="death"></td>
<td id="newDeath"></td>
</tr>
<tr>
<th scope="row">newCases</th>
<td id="newCases"></td>
<!-- <td>Thornton</td>
<td>#fat</td> -->
</tr>
<tr>
<th scope="row">Death</th>
<td id="death"></td>
<!-- <td>the Bird</td>
<td>#twitter</td> -->
</tr>
<tr>
<th scope="row">newDeath</th>
<td id="newDeath"></td>
<!-- <td>the Bird</td>
<td>#twitter</td> -->
</tr>
</tbody>
</table>

There are a lot of things that need to be fixed or changed or added to the HTML and the JS, but essentially you want to do something like this.
const dailyOverview = [{
date: '2021-09-09',
cases: 395155,
newCases: 703,
death: 11297,
newDeath: 1
}];
// dailyOverview[0] gets the first object, wrapped in braces {}.
// dailyOverview[1] would get the second object in braces.
// adding '.cases', '.newCases', etc. gets the property you want.
document.getElementById("cases").innerHTML = dailyOverview[0].cases;
document.getElementById("newCases").innerHTML = dailyOverview[0].newCases;
document.getElementById("death").innerHTML = dailyOverview[0].death;
document.getElementById("newDeath").innerHTML = dailyOverview[0].newDeath;
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">Covid-19 Canada</th>
<th scope="col">Quebec</th>
<th scope="col">Ontario</th>
<th scope="col">Manitoba</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Cases</th>
<td id="cases"></td>
<td id="newCases"></td>
<td id="death"></td>
<td id="newDeath"></td>
</tr>
<tr>
<th scope="row">newCases</th>
<td id="newCases"></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">Death</th>
<td id="death"></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">newDeath</th>
<td id="newDeath"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
You'll have to figure out how to loop through all the objects in your data and apply them to the table.
Create separate questions if necessary. Most of this has already been asked and answered here. There are also prebuilt JS libraries that could help. (You'll have to search for those. Asking about libraries isn't allowed on SO.)

playing sound onchange table content

I am trying to make a function which will play a sound when the value of a table field changes I tried it like this:
$(document).ready(function(){
$("#hor-zebra").change(function(){
document.getElementById('bflat').play()
});
});
Sorry I forgot my HTML:
<audio id="bflat" src="timbre.mp3"></audio>
<table id="hor-zebra" class="col-6" summary="">
<thead>
<tr>
<th scope="col">Ticket</th>
<th scope="col">Puesto</th>
</tr>
</thead>
<tbody>
<tr class="odd first">
<td class="first">A083</td>
<td class="first">MESA 1</td>
</tr>
<tr class="odd">
<td>B064</td>
<td>MESA 9</td>
</tr>
<tr>
<td>C028</td>
<td>MESA 5</td>
</tr>
</tbody>

Save current BGColor of the Cell into XML

I need to save the value of Bgcolor of column 1 from my table and have it available once i've refreshed the page. The background color on column1 will alter from Red or green once clicked.
This is done in SharePoint so I'm thinking that the simplest way is to save the background color value into an XML file which is saved in SharePoint as well.
I'm new to XML and I don't have access to do server side database like PHP or ASP.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
</head>
<body>
<table border="3" width="100%" cellspacing="0" style="text-align: center;">
<tbody>
<tr>
<td colspan="3" style="width: 595px;">
<strong>Bridges</strong></td>
</tr>
<tr>
<td>Bridge</td>
<td>Host Access Code (0001)</td>
<td>Participant Code</td>
</tr>
<tr>
<td onclick="myFunction(this)">1</td>
<td>45645645</td>
<td>45645644</td>
</tr>
<tr>
<td onclick="myFunction(this)">2</td>
<td>45645645</td>
<td>45645646</td>
</tr>
<tr>
<td onclick="myFunction(this)">3</td>
<td>45645666</td>
<td>45645645</td>
</tr>
<tr>
<td onclick="myFunction(this)">4</td>
<td>45645645</td>
<td>45645666</td>
</tr>
<tr>
<td onclick="myFunction(this)">5</td>
<td>456456456</td>
<td>456456456</td>
</tr>
<tr>
<td onclick="myFunction(this)">6</td>
<td>45645666</td>
<td>45645646</td>
</tr>
<tr>
<td onclick="myFunction(this)">7</td>
<td>45645645</td>
<td>45645666</td>
</tr>
<tr>
<td onclick="myFunction(this)">8</td>
<td>45645645</td>
<td>45645645</td>
</tr>
<tr>
<td onclick="myFunction(this)">9</td>
<td>45645645</td>
<td>45645645</td>
</tr>
<tr>
<td onclick="myFunction(this)">10</td>
<td>45645645</td>
<td>45645664</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function myFunction(x) {
if (x.bgColor == "red"){
x.bgColor = "green";
} else {
x.bgColor = "red";
}
}
</script>
</body>
</html>

Search not working with input tag on datatable 1.10

I have example about search with datatable : jsfiddle.net/rmLLo7z2
If I remove input tag and put on it is text normal. It is search ok.
But it can't search with input tag.

You need to set data-search and data-order attributes,
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody>
<tr>
<td data-search="Tiger Nixon" data-order="Tiger Nixon"><input value="Tiger Nixon"/></td>
<td data-search="System Architect" data-order="System Architect"><input value="System Architect"/> </td>
<td data-search="Edinburgh" data-order="Edinburgh"><input value="Edinburgh"/></td>
</tr>
<tr>
<td data-search="Garrett Winters" data-order="Garrett Winters"><input value="Garrett Winters"/></td>
<td data-search="Accountant" data-order="Accountant"><input value="Accountant"/> </td>
<td data-search="Tokyo" data-order="Tokyo"><input value="Tokyo"/></td>
</tr>
<tr>
<td data-search="Ashton Cox" data-order="Ashton Cox"><input value="Ashton Cox"/></td>
<td data-search="Junior Technical Author" data-order="Junior Technical Author"><input value="Junior Technical Author"/> </td>
<td data-search="San Francisco" data-order="San Francisco"><input value="San Francisco"/></td>
</tr>
<tr>
<td data-search="Cedric Kelly" data-order="Cedric Kelly"><input value="Cedric Kelly"/></td>
<td data-search="Senior Javascript Developer" data-order="Senior Javascript Developer"><input value="Senior Javascript Developer"/> </td>
<td data-search="Edinburgh" data-order="Edinburgh"><input value="Edinburgh"/></td>
</tr>
</tbody>
</table>
http://jsfiddle.net/rmLLo7z2/3/
More info about data-attributes: https://datatables.net/examples/advanced_init/html5-data-attributes.html

If data is loaded through Ajax or other sources,you can make use of render function like below.
columns: [
{
data:'displayname',
width:'30%',
render: function(data,type,row)
{
if(type === 'filter'){
return data;
}
return '<input type="text" style="width:100%" value="'+data+'" name="Child_Displayname">';
},
},
..]

complex header in datatables.net

I'm using table plugin of datatables.net. I'm having the problem with complex header columns and have the following error when using it.
Uncaught TypeError: Cannot call method 'fnSetData' of undefined at jquery.dataTables.js line 820
this html code (actually this is a template)
<!-- BEGIN:main -->
<table id='myTable' style='width: 100%'>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="4">Contract Details</th>
<th colspan="4">Delivery</th>
<th rowspan="2">Basis Terminal Month</th>
<th colspan="5">Fixed</th>
<th colspan="4">Unfixed</th>
<th colspan="3">Trigger</th>
<th colspan="2">Payment</th>
<th colspan="2" rowspan="2"></th>
</tr>
<tr>
<th>Contract Ref</th>
<th>Supplier/Buyer</th>
<th>Grade</th>
<th>Days Pending</th>
<th>Tons</th>
<th>Delivered</th>
<th>Balance</th>
<th>Status</th>
<th>Tons</th>
<th>Contract Price</th>
<th>Contract FOB Price</th>
<th>Mark To Market Price</th>
<th>Outright Exposure FOB</th>
<th>Tons</th>
<th>Contract FOB Diff</th>
<th>Mark To Market FOB Diff</th>
<th>Differential Exposure FOB</th>
<th>Strike Price</th>
<th>Variance</th>
<th>Days</th>
<th>Due Date</th>
<th>Days Late</th>
</tr>
</thead>
<tbody>
<!-- BEGIN:row -->
<tr id="row_{id}">
<td>{count}</td>
<td>{ref_number}</td>
<td>{supplier}</td>
<td>{grade}</td>
<td class="formatNumber alignRight">{pending_day}</td>
<td class="formatNumber alignRight">{contract_tons}</td>
<td class="formatNumber alignRight">{delivered_tons}</td>
<td class="formatNumber alignRight">{pending_tons}</td>
<td><input type="checkbox" id="rd_{id1}" value="{delivery_status}" {checked}/></td>
<td class="alignCenter">{terminal_month}</td>
<td class="formatNumber alignRight">{fixed_tons}</td>
<td class="formatNumber alignRight">{contract_price}</td>
<td class="formatNumber alignRight">{contract_fob_price}</td>
<td class="formatNumber alignRight">{market_price}</td>
<td class="formatNumber alignRight">{outright_fob}</td>
<td class="formatNumber alignRight">{unfixed_tons}</td>
<td class="formatNumber alignRight">{contract_fob_diff}</td>
<td class="formatNumber alignRight">{market_fob_diff}</td>
<td class="formatNumber alignRight">{differential_fob}</td>
<td class="formatNumber alignRight">{strike_price}</td>
<td class="formatNumber alignRight">{variance}</td>
<td class="formatNumber alignRight">{trigger_days}</td>
<td>{payment_due_date}</td>
<td class="formatNumber alignRight">{payment_days_late}</td>
<td><input type="button" value="Detail" onclick="ContractDetail('{id2}')"/></td>
<td><input type="button" value="Traffic" onclick="trafficMovement('{id3}')"/></td>
</tr>
<!-- END:row -->
</tbody>
</table>
<input type="hidden" id="action" name="action" value=""/>
<input type="hidden" id="contract_id" name="contract_id" value=""/>
<!-- END:main -->
and this is the javascript where I call datatable
$(document).ready(function() {
$("#myTable").dataTable();
});
I don't know what is the problem, I saw in datatables.net they say that it supports complex header column by call datatable(). I think my problem is from the html code.

The issue is in the header for the last two columns that you add for your buttons. You're declaring it as both rowspan="2" and colspan="2" and DataTables is interpreting it as a single column.
Simply change the
<th colspan="2" rowspan="2"></th>
to be:
<th rowspan="2"></th>
<th rowspan="2"></th>
And you will be good to go.

Develop Reference

JavaScript is the programming language of the Web.

DataTables jquery plugin not working, get a blank page? - javascript

Related

Is there a way to use JavaScript Object with Bootstrap Tables

playing sound onchange table content

Save current BGColor of the Cell into XML

Search not working with input tag on datatable 1.10

complex header in datatables.net

Categories

Resources