I have the below html tags. I will have n number of buttons and respective tables in a page. The page is dynamic, the data may increase, or decrease with respective backend where it feeds the data from. I would like to implement pagination, and showcase only 2 buttons and tables per page. if user wanna see they have to use pagination to see remaining data.
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">Source_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>111</th>
</tr>
<tr>
<td>111</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">Source_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>222</th>
</tr>
<tr>
<td>222</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">Source_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>333</th>
</tr>
<tr>
<td>333</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Can somebody help me to achieve the pagination to display only 2 <div>buttons</div> per page.
You can use Jquery data tables, it is very simple and easy to use with PAGINATION, SORT, SEARCH features.
<link rel="stylesheet"href="http://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
$(document).ready(function(){
$('.data_table').DataTable();
});
Like above sample u can create multiple data tables with different class name or Id.
if you are asking how then try this site
http://www.learningjquery.com/2017/03/add-pagination-to-html-table-using-jquery
has some info but if your making a tutorial....well you are not wrong
Related
how would I access the hair with Javascript (as in Black)? I tried using normal accessing from within other elements gradually through defining variables accessing the table and tr it was in, but it still didn't work. Please respond if you have an answer. Thx
<table id="customers" class="customers">
<tr class="parent" data-toggle="toggle">
<th id="rank" style="text-align: center;">Number</th>
<th id="name" style="text-align: center;">Name</th>
<th id="name" style="text-align: center;"></th>
</tr>
<tbody class="content">
<div class="one">
<tr>
<td>1</td>
<td class="name">Object A</td>
<td class="down">
<button onclick="toggleText()" type="button" class="collapsible" id="1">
+
</button>
</td>
</tr>
</div>
<tr class="panel" id="one-a" colspan="3">
<div class="panel">
<td class="expand">
<div class="hair">
Black
</div>
</td>
</div>
</tr>
</tbody>
</table>
It may have something to do with the table being a table and not being able to fetch certain values like normal code.
Try
var hairColor = document.getElementsByClassName("hair")[0].innerHTML;
it will return an array of elements , your array will be of length 1 (because you only have one tag with the specified class, "hair" in this case) so the value you need is of index 0.
How to use JavaScript to get elements by class name?
I have a below html tags which is feeding the data from database and display as table in html
<html>
<body>
<div>
<button type="button" class="button">DATA_1</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_2</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_3</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</body>
</html>
I have the below script which is going to hide all table by default
$(document).ready(function(){
$('.data_table').hide();
});
Also the button and table were generated automatically, and its completely dynamic page. I don't have any control to limit the data. The table gonna increase as per the input data that feed from db. Now I would like to show only specific records as per user click. If the user click DATA_1 button It should show the respective table and other should be hide.
I tried below script to show the respective data which is not working as expected:
$(document).ready(function(){
$('.button').on('click', function(){
$('.data_table').show();
});
});
The above code expand all the table instead of showing/hiding its immediate child table or first matching child table.
Also, I would like to do the same (Clicking DATA_1 button will show the immediate class(data_table)and other will be hide) with below html tags:
<html>
<body>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_2</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_3</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Can somebody help me to achieve this? I would like to showcase/hide only the immediate child table or first matching child table when I try to click the button.
You need to use $(this).next(). If you use $('.data_table'), it will show() all tables having that as a class. Hence, you need to use $(this).next()
$(document).ready(function() {
$('.data_table').hide();
$('.button').on('click', function() {
if ($(this).parent().next().find('table.data_table').is(":visible")) {
$(this).parent().next().find('table.data_table').hide();
} else {
$('.data_table').hide();
$(this).parent().next().find('table.data_table').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab">
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>AAA</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
<div>
<button type="button" class="button">DATA_1</button>
</div>
<div class="logtitude">
<table class="data_table">
<tr>
<th>BBB</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</div>
you should write like this:
$('.button').on('click', function(){
$(this).next().show().siblings('.data_table').hide();
});
You have to hide all tables first: $('.data_table').hide(); and you have to do it again after each button click.
Make the table next to the clicked button visible: $(this).next('.data_table').show();
$(document).ready(function(){
/* hide all tables initially */
$('.data_table').hide();
$('.button').on('click', function(){
/*on click hide all tables again */
$('.data_table').hide();
/* show table next to the clicked button */
$(this).next('.data_table').show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div>
<button type="button" class="button">DATA_1</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_2</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
<button type="button" class="button">DATA_3</button>
<table class="data_table">
<tr>
<th>XXX</th>
</tr>
<tr>
<td>YYY</td>
</tr>
</table>
</div>
</body>
</html>
I have an HTML table which is built in the following way:-
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Party</th> <th>Name</th> <th>Chamber</th> <th>District</th> <th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
Is it possible to create this table from javascript and in the HTML I just create a div and append the created table from javascript into this div. I tried placing the above content in a javascript variable and do an append but it did not work out. Is there a way to do this?? I think it did not work out may be because of the Angular JS variables. Correct me if I am wrong. I am pretty new to this.
In AngularJS use <div ng-bind-html="html-var"></div> and save the html-code in $scope.html-var.
For that you need to include <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>
I'm actually having the same problem like as in How to prevent jQuery .toggle() to show/hide all within .on 'click' but it didn't help so I'm making my own question.
Is there anyway to prevent toggle to show all but instead show only the neccesary toggle for the user to click? (extra topping -> extra_toppings selected) I did try with my minimum knowledge of using IDs as well this, next(), parents() but with no success.
Here's my code:
JavaScript
$(".extra_topping").click(function() {
$(".extra_toppings").toggle('slow');
});
HTML
(inside a loop over all foods: #foods.each do |food| ...)
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
I shortened to original HTML to just this to simplify the problem.
Here are my actual code look like : (without the rails code)
<table class="table">
<thead >
<tr>
<th>Name</th>
<th>Price</th>
<th>Category</th>
<th>Quantity</th>
<th>Actions</th>
<th>Additional Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
<td id="food" style="font-weight:bold;">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
<div class="extra_topping">
<a>Click me!</a>
</div>
</td>
</tr>
<tr class="extra_toppings">
<td>
</td>
<td colspan="4">
<div class= "mediocre">
<div class= "xaxixo">
<h6>Our Additional Menu</h6>
</div>
<div class="extra_topping">
</div>
<table class="mediocre_table">
<tr>
<td>
<div class="full_mediocre">
<div class="mediocre_collumn">
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
</tr>
</tbody>
You could use:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
If that was what your markup always looked like, e.g.
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
<div class="extra_topping">
<a>Click Me!</a>
</div>
<div class="extra_toppings">
<a> Show </a>
</div>
jsFiddle here.
I'm finally make it work by changing the code from:
$(".extra_topping").click(function(){
$(this).next('.extra_toppings').toggle('slow');
});
into:
$(".extra_topping").click(function(){
$(this).parents('tr').next().toggle('slow')
});
It Works!
I have buttons in my form and above it I have tables that I will set them to block and not blocking(Javascript)
when I click the link the relative table will show the content my problem is that by clicking the links the position of buttons will change I want them to be fixed what should I do?
(I have 2 form tags in a page this form is second one)
Thanks in Advance
<form name="ruleSaveSettingForm" method="POST" onsubmit="return applySave();">
<input type="hidden" name="rule_id">
<input type="hidden" name="rule_value">
<input type="hidden" name="openerhref">
<table align="right" border="0" cellpadding="0">
<tr>
<td class="tdaction"> <input type="submit" id="Save" value="Save" class="but"></td>
<td class="tdaction"> <input type="button" id="Reset" value="Reset" class="but" onclick="resetForm();return false;"></td>
<td class="tdaction"> <input type="button" id="Close" value="Close" class="but" onclick="window.close();"></td>
</tr>
</table>
</form>
Its better to move the buttons out of the out of the table , if its
placed inside it.
Move your table to a div and give it the style
property
min-height:50px;
This will remain the height of the div to 50 px even if the table is made hidden using java script.
Hope this will solve ur problem
<div style='min-height:150px;' id='yourID'>
<table border='1'>
<tr>
<td>data1</td>
<td>data1</td>
<tr>
<tr>
<td>data1</td>
<td>data1</td>
<tr>
<tr>
<td>data1</td>
<td>data1</td>
<tr>
</table>
</div>
<div>
<table>
<tr>
<td>button1</td>
<td>button2</td>
<td>button3</td>
<tr>
</table>
</div>
In the above sample , you need to place the buttons in anew div.You are free to use div or table.