Newbie JS DataTables question: How to initiate it? - javascript

Sorry for asking very newbie question, but I am completely new to web development and trying to build a simple 1-page site which will reflect some "table" data using DataTables package. I tried enomorous amount of different ways to initiate it, but with not much success.
What I am doing wrong? My code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#example').DataTable();
});
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
</body>
</html>

Assuming you mean this plugin: https://datatables.net/
You are using an old version of jQuery that is not compatible with this plugin. 1.11.3 is really old and it's highly recommended to update. Using the latest (SO) version of jQuery will fix your problem as you can see in the snippet below. Any 3.x version should do the job.
$(document).ready(function () {
$('#example').DataTable();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>

Related

DataTables Responsive Child rows don't work

Responsive Datatable with child rows works on DataTables own page example, but the same code dosen't work on my HTML page. No '+' button shows and all the child columns are included in the main table. I have tried using all the examples but getting the same result.
table without expand/collapse icon
I'm using this example for this question
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
} );
} );
</script>
</head>
<body>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
</tr>
<tr>
<td></td>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</tfoot>
</table>
</body>
</html>
Also, copying the whole source of the example page in local html gives the same result. But the example in the page itself i.e. by opening page as link in datatables site works in chrome.
as I said in the forum, it does work - have you tried resizing the screen? Bear in mind you only see the child rows when the screen has shrunk enough that the whole line cannot be displayed.

why are some js file not loading in html? [duplicate]

This question already has answers here:
Can the <script> tag not be self closed?
(4 answers)
Closed 5 years ago.
I have the below html code and i have included few js files in it. Only jquery file loads while the other 2 files don't . Can someone point out where i am going wrong. When i check in network tab through inspect element , i see that the request for the other js files haven't hit at all.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css">
<style>
div.container { max-width: 1200px }
</style>
</head>
<body>
<table id="example" class="display compact nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon#datatables.net</td>
</tr>
<tr>
<td>Rhona</td>
<td>Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
<td>6200</td>
<td>r.davidson#datatables.net</td>
</tr>
<tr>
<td>Colleen</td>
<td>Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
<td>2360</td>
<td>c.hurst#datatables.net</td>
</tr>
</tbody>
</table>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"/>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"/>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
responsive: true
} );
} );
</script>
</html>
<script> is not a self closing tag. Try the following:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script> tag may have some problems with the self-closing form. Try this:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>

Javascript / jquery adding pagination to td added via jquery append

I have a table which is hidden when the page is loaded and has not data in it.
After the user click a button the table is then populated and finally shown.
Like this:
tr = $('<tr/>');
tr.append("<td>somedata here</td>");
$('#mytable').append(tr);
$('#mytable').show();
and here's the table:
<table id="mytable" class="table table-striped table-bordered" style="display:none">
<thead>
<tr>
<th>Data below</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My problem is that I've tried plenty of plugins including dataTables and they just don't work.
I need to find either a way to get the plugins to work or find a way of doing pagination that works with the way I'm populating the table.
How can I do this?
You can use datatable. It will automatically handle pagination
Here is working demo :
$(document).ready(function() {
$('#example').DataTable();
var dataTable = $("#example").dataTable().api();
$("#addRow").click(function() {
tr = document.createElement("tr");
tr.innerHTML = "<tr><td>New row </td><td>Test</td><td>45</td></tr>";
dataTable.row.add(tr);
dataTable.draw();
});
});
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger</td>
<td>System Architect</td>
<td>61</td>
</tr>
<tr>
<td>John deo</td>
<td>System Architect</td>
<td>61</td>
</tr>
<tr>
<td>Jane Deo</td>
<td>System Architect</td>
<td>61</td>
</tr>
</tbody>
</table>
<button id="addRow">Add Row</button>

i try to run the program but it doesn't display in a table form. how do i fix this? below are part of my configuration

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
</head>
<body>
<table id = "datatable">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$("#datatable").dataTable();
});
</script>
</head>
<body style="font-family:Arial">
<table id="datatable" class="display" cellspacing="0" width="100%">
$(document).ready(function() {
$("#datatable").dataTable();
});
You need a thead and tbody. Check your HTML so it looks like this:
$(function() {
$("#example").dataTable();
})
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<table id="example">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
</thead>
<tbody>
<tr>
<td>line1</td>
<td>line2</td>
<td>line3</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/annoyingmouse/bvxekcxy/
I did a small change on my code and finally I got it in a data table.
$(function() {
$("#datatable").dataTable()
});
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<table id="datatable" class="display" 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>
</tbody>
</table>

Tablesorter does not sort (Jquery 1.8)

I did a lot of research concerning my question, but I didn't find an answer.
The tablesorter does not sort and I don't know why?.
Here is my test file. Can you tell me, what I'm doing wrong?
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sortable").tablesorter();
});
</script>
</head>
<body>
<table id="sortable">
<thead>
<tr>
<td>Username</td>
<td>Role</td>
</tr>
</thead>
<tbody>
<tr>
<td>SuperAdmin</td>
<td>SuperAdministrator</td>
</tr>
<tr>
<td>Simon</td>
<td>SuperAdministrator</td>
</tr>
<tr>
<td>Manfred</td>
<td>Administrator</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</body>
</html>
I've got the jQuery file, the tablesorter.js...
the files are loaded correctly, cause I can read them (using firebug)...
Please help me, because I prefer not to write a tablesorter by myself.
For the headers (Username and Role), use <th> instead of <td>
See this JSFiddle
Use this:
<thead>
<tr>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
Instead of:
<thead>
<tr>
<td>Username</td>
<td>Role</td>
</tr>
</thead>

Categories