Installing Data table as offline to my html [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 days ago.
Improve this question
Why my data table is not functioning even though i already have all the data table libraries (offline)?! please help me
I want to use the data table but it's not working

The documentation says you need these files:
https://cdn.datatables.net/1.13.2/css/jquery.dataTables.min.css
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js
then code for the table:
$(document).ready(function () {
$('#example').DataTable();
});
html table:
<table id="example" class="display" style="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>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>

Related

Add table cells from component in angular 4

I have the following HTML table:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>Component data 1</td>
<td>Component data 2</td>
</tr>
</table>
I want to add a component inside of the second that will contain the last 2 < td > tags so it will look something like this:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<some-data></some-data>
</tr>
</table>
The template of the some-data component will include the 2 < td > tags that the table needs, but doing this will break the table layout and will not look as it should.
Is there a way to achieve this?
what i understand from your question is you want to show dynamic data based on some input or database, you'll need PHP if only need to show input. database like mysql if want to fetch data.

Sorting table does not work correctly

I'm using a plugin called tablesorter. I'm trying to sort a table with rowspan rows. However, it does not sort all columns correctly. Here's the jsFiddle.
<table cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>28</td>
<td rowspan="2" style="vertical-align:middle">AAA</td>
</tr>
<tr class="expand-child">
<td>John</td>
<td>33</td>
</tr>
<tr>
<td>Clark</td>
<td>18</td>
<td>BBB</td>
</tr>
<tr>
<td>Bruce</td>
<td>22</td>
<td>CCC</td>
</tr>
</tbody>
</table>
JS
$('table').tablesorter();
The age column does not sort properly, how do I make it so that all the columns sort properly?
The problem (visually, not technically) is that you have a marked John as a child of Peter. So, only the numbers 28, 18 and 22 are considered for sorting. 33 is never considered for sorting at all.
Changing the first two rows as follows seems to solve the problem
<tr>
<td>Peter</td>
<td>28</td>
<td>AAA</td>
</tr>
<tr>
<td>John</td>
<td>33</td>
</tr>
From the looks of your HTML and your sorting requirement, doesn't look like you need the rowspan or the expand-child class. Maybe you confused rowspan with having same values for 2 rows?
do you want initial sorting?
sort by age
$('table').tablesorter({sortList: [[1,0]]});
sort by first name and age
$('table').tablesorter({sortList: [[0,0], [1,0]]});

Click on element to filter column in javascript (datatables)

I am using javascript DataTables to display data, and would like to modify filters by clicking on data items as well as the standard menus. For example, I have a table like this (obviously not including the javascript functions necessary to filter):
<table>
<thead>
<th>name</th>
<th>number</th>
</thead>
<tbody>
<tr>
<td>Bob</td>
<td>5</td>
</tr>
<tr>
<td>Sue</td>
<td>5</td>
</tr>
<tr>
<td>Sue</td>
<td>2</td>
</tr>
<tr>
<td>Bob</td>
<td>1</td>
</tr>
<tr>
<td>Frank</td>
<td>5</td>
</tr>
</tbody>
</table>
If the viewer clicks on 'Bob', I want the filter to be updated to only display rows containing 'Bob'.
Use ColumnFilterWidgets or ColumnFilter.
There are examples, snippets and docs in those pages. I hope it helps.

Table sorting from multiple tables

i'm using jquery and the jquery plugin "tablesorter" (http://tablesorter.com/docs/) to sort a table.
now I have the difficult, that I have following html (an other way is impossible):
<table class="tablesorter">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Bob</td>
<td>24</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>James</td>
<td>33</td>
</tr>
</table>
<table>
<tr>
<td>5</td>
<td>PJ</td>
<td>28</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Sue</td>
<td>39</td>
</tr>
</table>
In every table is one line. Now I want to sort this many tables as it is one table.
Is there any solution for this problem?
I've found an attempt here: http://jsfiddle.net/Mottie/8cg4f/31/
But there are ony two tables and the script only sort the data from one table.
Target the tables you want to pillage, drill down to the <tr>s, move them to where they need to be, climb back up to the (now empty) <table>s, throw them away. jsFiddle
$('table:not(.tablesorter)').find('tr').appendTo('.tablesorter')
.end().end().remove();
EDIT: as per comment I have simulated "spacing between <tr>s" by using padding on the <td>s jsFiddle.
If you have other requirements for the final page, just let me know what you'd like to end up with and I can help create a solution that will yield valid html which displays consistently for all your users.
Try something like this:
var $table = $(".tablesorter");
$table.nextAll("table").children().appendTo($table).end().remove();
$table.tablesorter();

Any suggestions on why I can not run this simple jquery tablesorter plugin example?

Sorry for the lame question.
I am trying to run a simple getting started tablesorter example with no luck.
I know my jquery works because I made a 'hello world' alert test.
I downloaded the .js files and placed them in my working directory/folder.
Firebug "Reponse" window shows me there is actual .js code in the files.
Firebug says Status: "304 Not Modified", Doamin: "localhost".
I am usimng WAMP.
<head>
<script src="jquery1.4.2.js" type="text/javascript"></script>
<script src="jquery.tablesorter.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
$("a").click(function() {alert("Hello world!")} );
}
);
</script>
</head>
<body>
Link
<table id="myTable"class="tablesorter" border="2" cellpadding="0" cellspacing="1" >
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
It worked fine for me when I ran your HTML through jsfiddle (link here). I know that the default jQuery filename is jquery-<version>.js, and I see that your source is missing the hyphen.
You said that the source shows up correctly in both of your files, though, so I'm not sure what's wrong here. Maybe something within jQuery expects the default filename?
I forgot to download the CSS files and make my web page aware of them! woops!!

Categories