How to use DataTable in Thymeleaf? - javascript

How to use datatable in thymeleaf. i have created a table in which i am creating a div inside of td for all the user present in userInfo list
How can i show only one user record as a div and inside of pagination section display only next and previous buttons.
Currently i am getting error jquery.min.js:2 Uncaught TypeError: Cannot read property 'mData' of undefined
I found some answer related to it as dataTables requires a well formed table. It must contain and . But i just want to display one div and hide other div when next button is clicked new div should be visible and hide the previous one
<table id="table_id">
<tr>
<td th:each="info : ${userInfo}">
<p th:text=${info.name}></p>
<p th:text=${info.dob}></p>
</td>
</tr>
</table>
In js i just have written this
$(document).ready( function () {
$('#table_id').DataTable();
} );

The following example shows one way in which you can use Thymeleaf to populate a table, and then use DataTables to display one row at a time (with "previous" and "next" buttons):
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<style>
.dataTables_paginate {
float: left !important;
}
</style>
</head>
<body>
<div style="margin: 20px; width: 150px;">
<table id="table_id">
<thead>
<tr>
<td>Users</td>
</tr>
</thead>
<tbody>
<tr th:each="info : ${userInfo}">
<td>
<p th:text=${info.name}></p>
<p th:text=${info.dob}></p>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#table_id').DataTable({
"dom": "tp",
"ordering": false,
"pagingType": "simple",
"lengthMenu": [ 1 ]
});
});
</script>
</body>
</html>
This creates a very simple display like this, with almost no CSS styling applied:
The Thymeleaf iterator needs to be placed in the tably body's <tr> tag, not in a cell tag.
The HTML table must be defined with both a <thead> and a <tbody> section, for DataTables to be able to use it.
The DataTables options are:
"dom": "tp" - displays only the table (t) and the pagination (p) controls.
"ordering": false - disables column ordering.
"pagingType": "simple" - shows only the "previous" and "next" buttons.
"lengthMenu": [ 1 ] - forces DataTables to show only one row at a time

Related

How get td click event from bootstrap table?

I am trying attribute a event to cells of differents columns of my bootstrap table.
The problem is: Although I have set a class to each column, the events attributed to this classes are not fired. I still tried set a class to each div added in cells, but its event also wasn't fired.
So, how can I get a td event using bootstrab table?
Here is the complete code for td click event for bootstap table
$(document).ready(function(){
$('table td').click(function(){
alert($(this).html());
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>Click on the td below</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Until you are showing us some code, you can try this,
$('body').on('click', '#tableID tr td', function(){
//whenever any td is clicked, this function will get called
});
you can change 'click' with whatever event name you want to bind your td with.
I am delegating the event to body, because if you dynamically add your table elements to your html, direct binding to those events will not fire/work.
try This
$("#boottable").on('all.bs.table', function (e, name, args) {
console.log(name, args);
});

How to use CSS to add a newline in JavaScript based buttons

I have created the table using DataTable.
It looks like this:
What I want to do is to split them like this:
How can I achieve that with customized CSS?
My HTML looks like this:
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.css">
<script type="text/javascript" language="javascript" src="./src/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="./src/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="./src/dataTables.colVis.min.js"></script>
<script>
$(document).ready(function() {
$('.sortable-table').DataTable( {
// Allow column selection, based on this
// https://datatables.net/extensions/colvis/
"dom": 'C<"clear">lfrtip',
// Except first column,
// it should stay.
// https://datatables.net/extensions/colvis/options
colVis:{exclude:[0]}
});
} );
</script>
<style>
body {
font-family: 'Helvetica Neue';
margin:150px;
}
img {
max-width:65%;
max-height:65%;
}
</style>
<title>Experiment 11</title>
</head>
<body>
<h2> G. Shared functional annotation</h2>
Here the functional analysis is scored with <tt>-log(Pvalue)</tt>.
<h3> LN </h3>
<table border="1" class="dataframe sortable-table display compact pure-table">
<thead>
<tr style="text-align: left;">
<th>GO</th>
<th>FOO</th>
<th>BAR</th>
</tr>
</thead>
<tbody>
<tr>
<td> regulation of response to wounding</td>
<td> 6.850</td>
<td> 11.975</td>
</tr>
</table>
</body>
</html>
As Per your example:
<div class="ColVis" >
<button class="ColVis_MasterButton">
<span>Show / hide columns</span>
</button>
</div>
This is your html for that button now we are applying css to it
.ColVis{
width:100%
}
button.ColVis_Button{
float:right
}
Provide Width 100% to your Colvis class and FLOAT:right to button.
Note :
If possible then apply new class for colvis and for button because if you change style of colVis then maybe it will change style in your other template or in your other layout so test it first.
example: http://jsfiddle.net/kevalbhatt18/urxk3q0z/2/
When you see output in jsfiddle first starch the size of output screen
so you can see proper output
Try adding this rule to your CSS:
div.ColVis {
float: right;
margin-bottom: 1em;
}
Okay, so after reviewing your code then hopping on the ColVis website and inspecting their search and show/hide button, I have come to the conclusion! I need to see your CSS because, at the moment, the way they have it is predefined to inherit from the parent class. So, if you want to adjust the predefined css then manipulate this: button.ColVis_Button, ul.ColVis_collection li, this is the class hierarchy they use to move the button around. Just add the !important tag to the things you need changed.

How to add to the right of the datatables?

I have a DataTables and below a chart.
I have this :
Here is my Html code :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Css/jquery.visualize.plugin.css" />
</head>
<body>
<table id="table_statistic_1" class="display">
<caption style="font-size: 20px">Omzetcijfer per geografische zone</caption>
<thead>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
After filling the DataTables, I put the chart.
$('table').visualize({ type: 'line' });
I would like to add my chart to the right of my DataTables. How?
I solved the problem.
I saw that the datatables loaded a *dataTables_wrapper* that took up the entire width of my page and therefore my graph is displayed below.
I then added div tags for the dataTables and the graph as a css float left and I have a container which includes these 2 tag div. I place the tags div tags left and right with width :50%
Html code :
<div id="left">
<table id="table_statistic_1" class="display">
<caption class ="caption">Omzetcijfer per geografische zone</caption>
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="right"></div>
Css code :
.container { display:block; margin:0; padding:0; width:100%; height:400px; }
#left, #right{ float:left; display:block; margin:0; padding:0; width:50%; height:400px;}

Hide specific row from table without ID

I have simple table generated by PHP.
<table border="1" id="control>
<tbody>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr> //Row #3
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
I would like to hide 3rd row when page loads using javascript or css. Is there any way to do this without giving 3rd row ID?
Thank you in advance
with css3 you can use the :nth-child selector
#control tr:nth-child(3)
{
display:none;
}
using jquery its pretty simple, $('#control tr:eq(2)').hide()
Try this
document.getElementsByTagName("tr")[2].style.display = 'none';
Using pure JavaScript (no framework like JQuery etc.) one can do:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1" id="control">
<tbody>
<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
<tr><td>row3</td></tr>
<tr><td>row4</td></tr>
<tr><td>row5</td></tr>
<tr><td>row6</td></tr>
</tbody>
</table>
<script type="text/javascript">
var tableElm = document.getElementById("control");
var tableChilds = tableElm.getElementsByTagName("tr");
var row3 = tableChilds[2];
row3.style.display = "none";
// alternatively:
//row3.style.visibility = "hidden";
</script>
</body>
</html>
Use jQuery's eq(int) to select the row at the zero-based index:
$("#control tr").eq(2).hide();

Table with twitter bootstrap and jQuery

I have this js part of script:
jQuery.each(data, function(index, value) {
$("table_div").append("<td>" + value + "</td>");
});
I want use this for create a table with twitter bootstrap. In the html page there is this table element:
<table class="table table-striped" id="table_div">
</table>
But this solution doesn't works. How I have to do? Thank you!
First of all, you're not appending any <tr> elements which are needed in a table, and secondly you're referring to $("table_div") instead of $("#table_div") (the hashtag # means that you're referring to an ID, just like in CSS).
jQuery.each(data, function(index, value) {
$("#table_div").append("<tr><td>" + value + "</td></tr>");
});
Besides referring to the node <table_div> instead of the id #table_div you don't want to append anything to the table node.
You should take a look at this as well as here and here.
You should use tbody when using Twitters Bootstrap anyways for example, like so:
<table id="table_div" class="table table-striped">
<tbody></tbody>
<table>
here the right js
for (i in data) {
$('#table_div > tbody:last').append('<tr><td>'+data[i]+'</td></tr>');
}
For more research look here Add table row in jQuery
Edit:
Ok i wrote you an entire example using twitters bootstrap and jQuery.
This works, if it doesn't for your data array, something is wrong with it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>
<body>
<table class="table table-striped" id="my-table">
<tbody>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
var data = ["foo","bar"];
$(document).ready(function(){
$.each(data, function(i,item){
$('#my-table > tbody:last').append('<tr><td>'+item+'</td></tr>');
});
});
</script>
</body>
</html>

Categories