I try to put 2 tables in a same page using jquery plugin tablesorter ..
But if do it, my second table does not work correctly..
In my second table, i have not the header name of my second table,
You can see it here :http://jsfiddle.net/9hHx5/
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.scroller.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('table.tablesorter').tablesorter({
scrollHeight: 150,
widgets: ['zebra','scroller']
});
//Setup window.resizeEnd event
$(window).bind('resize', window_resize);
$(window).bind('resizeEnd', function (e) {
/*
IE calls resize when you modify content, so we have to unbind the resize event
so we don't end up with an infinite loop. we can rebind after we're done.
*/
$(window).unbind('resize', window_resize);
$('table.tablesorter').each(function(n, t) {
if (typeof t.resizeWidth === 'function') t.resizeWidth();
});
$(window).bind('resize', window_resize);
});
});
function window_resize() {
if (this.resize_timer) clearTimeout(this.resize_timer);
this.resize_timer = setTimeout(function () {
$(this).trigger('resizeEnd');
}
, 250
);
}
</script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="inner-header">Demo</div>
<table id="table1" cellspacing="0" cellpadding="0" class="tablesorter">
<thead>
<tr>
<th class="yr">Year</th>
<th>Artist</th>
<th>Single</th>
<th>Album</th></tr>
</thead>
<tbody>
<tr><td class="yr">1979</td><td>Specials</td><td>Gangsters</td><td>Non-album single</td></tr>
<tr><td class="yr">1979</td><td>Specials</td><td>A Message to You, Rudy</td><td>Specials </td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Too Much Too Young</td><td>Specials</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Rat Race</td><td>Non-album single</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Stereotype</td><td>More Specials</td></tr>
<tr><td class="yr">1980</td><td>Specials</td><td>Do Nothing</td><td>More Specials</td></tr>
</tbody>
</table>
<table id="table2" cellspacing="0" cellpadding="0" class="tablesorter">
<thead>
<tr>
<th>People</th><th>Age</th><th>Birthday</th>
</thead>
<tbody>
<tr>
<td class="yr">XYZ</td><td>12</td><td>12/15/2012</td></tr>
<tr>
<td class="yr">RZE</td><td>36</td><td>12/12/1985</td></tr>
<tr>
<td class="yr">HFF</td> <td>36</td><td>01/02/1985</td>
</tr>
</tbody>
</table>
</body>
</html>
Please if someone can help me
The problem appears to be a bug in the scroller widget code:
Change this line:
var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', table[0]).html() + '<thead></table>');
to this (it's just this part $('thead', $tbl).html() that changed)
var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', $tbl).html() + '<thead></table>');
and it fixes the problem.
I've included that correction in this updated demo.
I would also like to suggest you try out my fork of tablesorter which includes lots of improvements, as well as this updated scroller widget (which still has some problems that needs fixing).
Related
I saw this block of code from w3schools and it works perfectly fine. My only issue is that, if the inputted text is not present on the table, it doesn't display anything.
Here's the script code:
$(document).ready(function() {
$('#searchBar').on('keyup', function() {
var value = $(this).val().toLowerCase();
$('#tableData tr').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Here's the link to the w3schools article that I am talking about:
https://www.w3schools.com/bootstrap/bootstrap_filters.asp
I'd like to display a text saying "No results found" if there are no search results.
Here my solution for your problem I think this is the optimal solution for your problem.
Here the HTML which I get from the link you provided of w3school I added here a new row in HTML , little style and some conditional line in the JS code
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.no-data {
display: none;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
let check = true;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if($(this).text().toLowerCase().indexOf(value) > -1){
check = false;
$('.no-data').hide();
}
});
if(check){
$('.no-data').show();
}
});
});
</script>
</body>
</html>
the new row I added in HTML for showing "No data" is here:
<tr class="no-data">
<td colspan="4">No data</td>
</tr>
style for the new row
.no-data {
display: none;
text-align: center;
}
I added a some new conditional line in JS and after adding those the JS code is :
$(document).ready(function(){
$("#myInput").on("keyup", function() {
let check = true;
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if($(this).text().toLowerCase().indexOf(value) > -1){
check = false;
$('.no-data').hide();
}
});
if(check){
$('.no-data').show();
}
});
});
Hope your problem is solved have a nice day .
I have an HTML data table, I attached code and also attached test case. Here I do dynamically prepend the row in data table,that means I want to add a row in first position with serial number dynamically. Test Case Datatable
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.dataTables.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Age</th>
<th>Salary.</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Tiger Nixon</td>
<td>61</td>
<td>$320,800</td>
</tr>
<tr>
<td>2</td>
<td>Garrett Winters</td>
<td>63</td>
<td>$170,750</td>
</tr>
</tbody>
</table>
<input type="button" value="addNew Row" onclick="addNewRow()"/>
</body>
</html>
And the JavaScript is:
function addNewRow() {
var table = $('#example').dataTable();
var rowLen = table.fnGetData().length;
var srNo = rowLen + 1;
var t = $('#example').DataTable();
t.row.add(['1','vuyv','54','89855']).node().id = 'lclSsrContainer_' + rowLen;
t.draw(false);
$('#lclSsrContainer_' + rowLen).attr('style', 'color: #0822f3;');
}
How to add dynamically in first position with dynamic serial number, and no change in data table?
Datatable has no property liked
prepend()
If we want to add a row in first postion it collapse our datatable functionalities,So finally after adding a row
t.row.add([rowLen,'vuyv','54','89855']).node().id = 'demo_' + rowLen;
just reorder the table as like
$('.sorting_asc').click();
this jquery function can solve my problem.It comes first position
because your table is set to sort on "s.no" the row will be inserted based in this value so if you did :
t.row.add(['0','vuyv','54','89855']).node().id = 'lclSsrContainer_' + rowLen;
that would be placed in the first row because the "s.no" value is "0" and if you wanted it at the end row every time:
t.row.add([rowLen,'vuyv','54','89855']).node().id = 'lclSsrContainer_' + rowLen;
the problem is though is if you waned "s.no" as any value and still be the first row you would have to remove the sort from the table
hope this helps
The problem is whenever im drag & drop and replace td first place to another
i have receiving that the replacement id in jquery.
but the problem is how i can get that replacement td id value in php codeigniter.
i just need if any of td of table has been exchange then i should knw which one is is replaced and get that id into my controller class of php codeigniter.
thanks in advance.
$(document).ready(function () {
$('tbody').addClass("DragMe");
$('.DragMe').sortable({
disabled: false,
axis: 'y',
items: "> tr:not(:first)",
forceHelperSize: true,
update: function (event, ui) {
var Newpos = ui.item.index();
var RefID = $('tr').find('td:first').html();
//alert("Position " + Newpos + "..... RefID: " + RefID);
$("#GridView1 tr:has(td)").each(function () {
var RefID = $(this).find("td:eq(0)").html();
var NewPosition = $("tr").index(this);
alert(RefID + " " + NewPosition);
$("#getpos").val(NewPosition);
$("#ref").val(RefID);
});
}
}).disableSelection();
});
<style type="text/css">
.DragMe:Hover {
cursor: move;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- here is my view form -->
<form method="post" action="<?php echo base_url(); ?>index.php/dragcon/drag/dragfun">
<table class="EU_DataTable" cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
<tbody>
<tr>
<th scope="col">Ref ID</th>
<th scope="col">Issue relates to</th>
</tr>
<tr class="ui-sortable-handle">
<td id="ref">9392</td>
<td id="getpos">CRM</td>
</tr>
<tr class="ui-sortable-handle">
<td id="ref">9394</td>
<td id="getpos">CRM</td>
</tr>
<tr class="ui-sortable-handle">
<td id="ref">9308</td>
<td id="getpos">eMail</td>
</tr>
<tr class="ui-sortable-handle">
<td id="ref">9342</td>
<td id="getpos">Other</td>
</tr>
<tr class="ui-sortable-handle">
<td id="ref">9365</td>
<td id="getpos">CRM</td>
</tr>
<tr>
<td><input type="submit" name="submit"></td>
</tr>
</tbody>
</table>
</form>
As you seen where i can drag and drop td to td of table and also receiving in alert but i just want to get each of td value after change in the controller of php codeigniter
thanks in advance.
You need to look at the difference between client side and server side code. The action you perform in Javascript can not be passed to the original Codeigniter script as that script was already executed.
In order to call back Codeigniter you want to use Ajax and in particular the Ajax functions of jQuery since you seem to be using that.
It's a complex topic and you should study it in details to be sure you grasp the difference between server-side and client-side, when they happen and how they interact. If you want a more quick & dirty approach, this article from IBM seems perfect as it talks about Ajax, jQuery and CodeIgniter.
I have this html table:
<table class="table" id="requestTable">
<thead class="text-primary">
<th>Id</th>
<th>موضوع درخواست</th>
<th>نوع درخواست</th>
<th>نام رابط شرکت</th>
</thead>
<tbody>
<tr class="row">
<td>#item.Id</td>
<td>#item.subjects</td>
<td>#item.requesttype</td>
<td>#item.interfacename</td>
</tr>
</tbody>
</table>
and write this jquery code:
<script src="~/scripts/jquery-3.1.1.min.js"></script>
<script>
$('#requestTable tr').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
$(document).ready(function() {
$("#requestTable tr").click(function() {
alert("You clicked my <td>!" + $(this).html() +
"My TR is:" + $(this).parent("tr").html());
//get <td> element values here!!??
});
});
</script>
but when i try to click on the row, don't get any alert.
I had made some changes in your code.
Changes:
Jquery Reference
Click event
HTML:
<html>
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$('#requestTable tr').hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
$(document).ready(function () {
$("#requestTable tr td").click(function () {
alert("You clicked my <td>! " + $(this).html() +
" My TR is:" + jQuery(this).closest('tr').text());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="table" id="requestTable">
<thead class="text-primary">
<th>Id</th>
<th>ID</th>
<th>Subject</th>
<th>Request Type</th>
</thead>
<tbody>
<tr class="row">
<td>#item.Id</td>
<td>#item.subjects</td>
<td>#item.requesttype</td>
<td>#item.interfacename</td>
</tr>
<tr class="row">
<td>#item.Id 1</td>
<td>#item.subjects 1</td>
<td>#item.requesttype 1</td>
<td>#item.interfacename 1</td>
</tr>
<tr class="row">
<td>#item.Id 2</td>
<td>#item.subjects 2</td>
<td>#item.requesttype 2</td>
<td>#item.interfacename 2</td>
</tr>
</tbody>
</table>
</div>
</form>
Hope this will work for you. Please let me know if you still face any issue. I will try to explain.
Are you sure that jquery has been loaded properly? My guess is that jquery can not be resolved using the ~/ or does not exist at that location
This fiddle seems to alert properly.
https://jsfiddle.net/o5aj1nww/
Try replacing your script tag with this
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
You could try the below:
<script type='text/javascript'>
$('#request table tr').find('tr').click( function(){
var row = $(this).find('td:first').text();
alert("You clicked my <td>!" + $(this).html() +
"My TR is:" + $(this).parent("tr").html());
});
</script>
how can i append a new tr to the top of the table instead of under other tr.
Example:
<table width='100%'>
<tr><td>something</td><td>else here</td></tr>
<tr><td>something2</td><td>else here2</td></tr>
</table>
After a click event in jQuery, how can i place
<tr><td>something3</td><td>else here3</td></tr>
at the top of the table so it now looks like
<table width='100%'>
<tr><td>something3</td><td>else here3</td></tr>
<tr><td>something</td><td>else here</td></tr>
<tr><td>something2</td><td>else here2</td></tr>
</table>
Any help on this would be greatly appreciated.
$('table').prepend('<tr><td>something3</td><td>else here3</td></tr>');
or...
$('<tr><td>something3</td><td>else here3</td></tr>').prependTo('table');
More info on 'prepend': http://docs.jquery.com/Manipulation/prepend
More info on 'prependTo': http://docs.jquery.com/Manipulation/prependTo
This JS is IE specific at the moment, but it shouldn't be too hard to make it multi-browser compatible.
<html>
<body>
<script language="JavaScript">
function function1() {
var myRow = document.all.myTable.insertRow(0);
var myCell = myRow.insertCell();
myCell.innerText = "The added cell";
}
</script>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<td width="100">3</td>
<td width="100">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<button onclick="function1();">Add a cell</button>
</body>
</html>