html table table pagination without jquery [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 months ago.
Improve this question
I'm new to the front-end and I'm currently training in a project HTML - CSS - javascript , I'm having an issue with Table HTML element, I created a table
A header
Another header
First
row
Second
row
and the header of the table is search-input that searches through the table data, and I'm trying to show a maximum of 5 rows (pagination) but when searching shows search results of all the data.
<table id="userstable" class="content-table">
<thead>
<tr>
<th> <input type="text" class="search-input" placeholder="UserName"></th>
<th> <input type="text" class="search-input" placeholder="Full Name"></th>
<th> <input type="text" class="search-input" placeholder="Address"></th>
<th> <input type="text" class="search-input" placeholder="PhoneNum"></th>
<th> <input type="text" class="search-input" placeholder="Service"></th>
<th> <input type="text" class="search-input" placeholder="FUP"></th>
<th> <input type="text" class="search-input" placeholder="IP Address"></th>
<th> <input type="text" class="search-input" placeholder="Location"></th>
</thead>
<tbody>
<tr>
<td>Ali</td>
<td>Domenic</td>
<td>Kobbeih</td>
<td>+96170473654</td>
<td>2M-4GB-230,000</td>
<td>0</td>
<td>192.324.422</td>
<td>432.343,42.2342</td>
</tr>
my question is how i can add pagination to my current table to show max of 5 results per page?

You would want get the inner html of the table you are working with. Next you would want to edit the html so that for each "page", a new div is made. To show any specific page, you can edit the "visibility" css class. I would save each table page in a seperate variable in a array, so with each button click you could hide the previous page and make each next page visible.
let tableHtml = document.getElementById('pageOne').innerHtml;
tableHtml = /*your table html*/;
<tbody id="pageOne">
<!-- your rows content -->
</tbody>

Related

jQuery not working in my HTML page [closed]

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 6 years ago.
Improve this question
I am stuck with an issue ..
I am using AngularJS and 'have included jQuery in it which is not working in HTML page. Why does this happen?
$('#setting').change(function() {
alert("hi");
});
<div class="content table-responsive table-full-width">
<table class="table table-hover table-striped">
<thead>
<th>Settings</th>
</thead>
<tbody>
<tr>
<td>
<select id="setting" class="form-control">
<option>---Select---</option>
<option ng-repeat="item in settings" value="{{item.id}}">{{item.name}}</option>
</select>
<div id="btn" class="col-md-12" style="margin-top: 16px;">
<input type="button" name="Activate" value="Activate" />
<input type="button" name="Deactivate" value="Deactivate" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
Please help me with this. Thanks in advance
Instead just use ng-change directive:
<select id="setting" class="form-control" ng-change='functionToCall()'>
and in your controller's scope object add this funciton:
$scope.functionToCall = function(){
alert('hi');
};
If you have started with angularjs then its better to leave the jquery style code. Angularjs is way different than jquery.
This is good starting point."Thinking in AngularJS" if I have a jQuery background?
This often happens when you use jQuery against DOM elements which haven't been created yet.
When your webpage loads, the Angular (probably) won't have kicked in, and populated your drop down list yet.
The solution is to use Angular's ng-change instead. Then, your function will get kicked off when you select an item in your drop down list.
I have an example of this here:
Angular tutorial
Here, I update the customer's details whenever the user selects a new customer:
The code, to populate the list, and call a function when the selected item changes, looks like this:
<select ng-model="selectedCustomer"
ng-change="loadOrders();"
ng-options="customer as customer.CompanyName for customer in listOfCustomers" >
</select>

Receive table values on click on different page [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a table containing 2 columns named S.No. and Book. In S.No. Value 1 2 3... And in Book column there is a submit button for each row. If I click on first submit button then it should print 1 and if I click on 2nd submit button then it should print 2 on different page (data.php)
After you posted your table (in a comment!) I believe I understand what you want to achieve. I created two files, copy-pasted your code, and made some very little changes:
In "books.php" the submit buttons are enclosed in "form" tags.
"data.php" gets the book number from "$_POST".
Here are the files:
books.php
<table border="1">
<tr>
<th>S.No.</th>
<th>Book</th>
</tr>
<tr>
<td>1</td>
<td> <!-- THE BOOK NUMBER IS IN A HIDDEN FIELD OF THE FORM -->
<form method="post" action="data.php">
<input type="text" value="1" name="book" hidden>
<input type="submit" value="Submit">
</form>
</td>
</tr>
<tr>
<td>2</td>
<td> <!-- THE BOOK NUMBER IS IN A HIDDEN FIELD OF THE FORM -->
<form method="post" action="data.php">
<input type="text" value="2" name="book" hidden>
<input type="submit" value="Submit">
</form>
</td>
</tr>
</table>
data.php
<?php
// GET BOOK NUMBER FROM PREVIOUS PAGE.
if ( isSet( $_POST["book"] ) )
$book = $_POST["book"];
else $book = "";
?>
<form>
<label for="sno">S.No.</label>
<input type="text" value="<?php echo $book;?>"> <!-- DISPLAY BOOK NUMBER -->
<input type="submit" value="Submit">
</form>
What SHiV with JARVIS must do is to create two files with the given names, copy-paste previous code, open your browser and run localhost/books.php.

jQuery looking for a plugin to dynamically move tables and updates ID's accordingly [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
I'm trying to find a way in jQuery to move dynamically tables.
I've coded actually a button to clone a hidden table when needed as well a button to delete a not needed table.
Now I'd like to add the function to change the order of those tables dynamically. But, I need the id's of the elements inside the table to be updated as well as the data will be used into a form (see sample).
<TABLE id="Leg0" width="400px" border="0">
<TR >
<TD><INPUT type="checkbox" class="delCheckLeg" name="chk"/></TD>
<TD><INPUT type="text" placeholder="Date" class="datepicker" id="tripdate0" name="tripdate0"/></TD>
<TD><INPUT type="text" placeholder="Dep Time" id="deptime0" name="deptime0"/></TD>
<TD><INPUT type="text" placeholder="Departure" class="aptsearch" id="routingdep0" name="routingdep0"/></TD>
<TD><INPUT type="text" placeholder="Arrival" class="aptsearch" id="routingarr0" name="routingarr0"/></TD>
<TD><INPUT type="text" placeholder="Flight Time" id="fttime0" name="fttime0"/></TD>
<TD><INPUT type="text" placeholder="Pax" id="pax0" name="pax0"/></TD>
</TR>
</TABLE>
<TABLE id="Leg1" width="400px" border="0">
<TR >
<TD><INPUT type="checkbox" class="delCheckLeg" name="chk"/></TD>
<TD><INPUT type="text" placeholder="Date" class="datepicker" id="tripdate1" name="tripdate1"/></TD>
<TD><INPUT type="text" placeholder="Dep Time" id="deptime1" name="deptime1"/></TD>
<TD><INPUT type="text" placeholder="Departure" class="aptsearch" id="routingdep1" name="routingdep1"/></TD>
<TD><INPUT type="text" placeholder="Arrival" class="aptsearch" id="routingarr1" name="routingarr1"/></TD>
<TD><INPUT type="text" placeholder="Flight Time" id="fttime1" name="fttime1"/></TD>
<TD><INPUT type="text" placeholder="Pax" id="pax1" name="pax1"/></TD>
</TR>
</TABLE>
I've tried to use a system with arrows to move the tables up and down but it would be more nice with a dragging solution. For such thing, I've seen the pluggin "Table Drag and Drop JQuery plugin" but it seems to work only with rows&columns.
Does anyone have an idea on how to perform this?
You can go with slickgrid. Slickgrid is open source library and has nice documentation and examples

How to get checkbox values and insert them to an observable array in knockouts [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
<table class="table table-hover">
<thead>
<tr>
<th> Kategoriler </th>
</tr>
</thead>
<tbody data-bind="foreach:categories">
<tr>
<td>
<input type="checkbox" class="tooltips" data-bind="value: name" data-bind="checked: categoriesToSend" />
</td>
<td data-bind="text:name"></td>
</tr>
</tbody>
</table>
This is my table that content checkboxex. I want to get values from this checkboxes and insert this values to an observable array how can i do this?
In this case, you would want to do something like:
<input type="checkbox" data-bind="attr: { value: name }, checked: $parent.categoriesToSend" />
So, you want to:
use a single data-bind attribute
do a one-way binding for the value attribute using the attr binding
use the checked binding against categoriesToSend which lives on the parent (not on the category itself), so it can be referenced using $parent.categoriesToSend
Here is a sample in jsFiddle: http://jsfiddle.net/rniemeyer/Vf5LA/

Need to duplicate code [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 8 years ago.
Improve this question
So guys I have a code that outputs text boxes and the information will be saved.
<tbody id="1111111">
<tr>
<td class="ObjektiivneLeid">The function</td>
<td class="Hinnang">
<input class="Hinnang_Valimata" type="radio" name="1111111_Hinnang" value="Valimata" id="1111111_Hinnang_Valimata" />Valimata
<input class="Hinnang_norm" type="radio" name="1111111_Hinnang" id="364644000_Hinnang_NORM" value="NORM" />NORM
<input class="Hinnang_pat checkbox_idParent" type="radio" name="1111111_Hinnang" id="1111111_Hinnang_Patoloogia" value="Patoloogia"/>Leid</td>
<td class="Patoloogia">kuupäev
<input id="1111111_otherInfo_kuupaev" name="1111111_otherInfo_kuupaev" type="text" value="" class="Patoloogia_text" onFocus="gnlGotFocus(getCurrentDate(),this);"
onKeyDown="javascript:gnlKeyDown('00.00.0000',this,event);" maxlength='10'
onblur="javascript:gnlDateValid(this,event,false);"/></td>
</tr>
<tr>
<td class="title_sub Patoloogia">sight</td>
<td class="Patoloogia"><input id="1111111_otherInfo_sight" name="1111111_otherInfo_sight" type="text" value="" class="Patoloogia_text"></td>
</tr>
<tr>
<td class="title_sub Patoloogia">hearing</td>
<td class="Patoloogia"><input id="364644000_otherInfo_hearing" name="364644000_otherInfo_hearing" type="text" value="" class="Patoloogia_text"></td>
<td class="title_sub Patoloogia">speech</td>
<td class="Patoloogia"><input id="1111111_otherInfo_speech" name="1111111_otherInfo_speech" type="text" value="" class="Patoloogia_text"></td>
</tr>
<tr>
<td class="title_sub Patoloogia">mobility</td>
<td class="Patoloogia"><input id="1111111_otherInfo_mobility" name="1111111_otherInfo_mobility" type="text" value="" class="Patoloogia_text"></td>
<td class="title_sub Patoloogia">movement</td>
<td class="Patoloogia"><input id="1111111_otherInfo_movement" name="1111111_otherInfo_movement" type="text" value="" class="Patoloogia_text"></td>
</tr>`
So this is the code that gives me boxes to fill in and I need to make a adding system to that code, so when I press i.e. '+' it will duplicate the code and I have new fields to fill and save. Also I need and 'x' button to erase the new field if the need comes. Any suggestions how would I go by doing it (I hope my explanation wasn't to confusing)
I need something like <tr><td colspan="4"><img src="./images/addButton.gif" alt="Add" border="0" onclick="" class="button" /></td></tr> but I dont know what to pud in the onClick....I know it seems stupid but I really could use some help
If I understood you correctly, you would be needing JQuery. Looking for something like this?
$(document).ready(function() {
var dupe = $('#parent_0').clone();
var id = 1;
$(document).on('click', '#plus', function() {
id++;
var newForm = $(dupe).clone().attr('id', 'parent_'+id);
$('body').append(newForm);
});
$(document).on('click', '#delete', function() {
id--;
$('[id^="parent_"]:last').remove();
});
});
I have made a JSFiddle based on your code for you to have a look at.
For demonstration purposes a div is used. There should be a form tag around your code since it actually is a form, but it seems JSFiddle doesn't like the use of forms in it's application. This div element will be cloned with .clone() and is given a unique attribute with .attr() when the button #plus is clicked.
#delete deletes the last clone element in the document whose id starts with parent_.
When you're posting stuff, make sure you paste the whole thing in the question.
Use appendChild(n) and removeChild(n) on the parent object containing the text boxes.

Categories