I'm trying to implement individual column searh, but it seems to not be working.
When i have the fields under eah column which have been created accordinly to the documentation.
$('.table tfoot th').each(function(){
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" name="'+title+'" />' );
});
It will create 3 different fields, for each of my columns, when i type anything on them, a request is triggered to my server, everything is fine.
I was looking into the request header and found out that all sSearch_# were filled, as you can see on the image below.
As you can see, when i typed on the first field (first column) it triggered sSearch_0, sSearch_1 and sSearch_2. It should have triggered just sSearch_0 because i typed on the first column.
I have no idea how to fix this.
updating
<table class="permissions table table-bordered">
<thead>
<th>Path</th>
<th>Group/User</th>
<th>Permission</th>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Path</th>
<th>Group/User</th>
<th>Permission</th>
</tr>
</tfoot>
Related
<table id="datatable">
<tr>
<th>no</th>
<th>name</th>
<th>address</th>
<th>ket</th>
<th>act</h>
</tr>
<tr>
<td>1</td>
<td>erik</td>
<td>lampus</td>
<td>Closed</td>
<td><button id="get">get</button>
</tr>
<tr>
<td>2</td>
<td>lupin</td>
<td>ggreek</td>
<td>open</td>
<td><button id="get">get</button>
</tr>
</table>
$('#datatable').on('click', '#get', function() {
const row = $(this).closest('tr')[0];
const ket = row.cells[1].innerHTML;
$('#modal').modal('show');
$('#inputmodal').val(ket);
$('#buttonmodal').on('click', function() {
const ket2 = $('#inputmodal').val();
$('#modaladuan').modal('hide');
row.cells[8].innerHTML = ket2;
});
});
I want to change column ket in data table using modal bootstrap, and when button save modal click, value in input modal to change the column, this code work but when second rows click and save, Previously stored data also changed. how to solved that problem, help me. thank you
The problem is that you're using the button with id get. You can only have 1 element for each ID on a page. So:
Change the id="get" to class based, like class="get".
Then add a data-content (content can be a name of your choice) attribute to the button which should be equal to some value for each row. Here you'll have the value which you'll pass to the modal. If you don't prefer to pass data-* attributes, you could traverse the DOM elements (as you've done in your example), but it's generally not that great an idea.
Change the click to act on .get, then you could access the current target's data-content value, and proceed as you were.
If this doesn't work, put up a reproducible example of your code on JSFiddle and we can debug!
I prepared a little simplified snippet, so we can play things through here. Instead of the modal I am using a prompt() to receive an input value from the user. And, as you are already using jQuery you might as well use it properly: I use the tds jQuery object to collect all TDs of the current row. I grab the text value of the second TD in the row (index=1) and use the prompt for getting the user input for putting it back into the fourth column (index=3). The 9th column (index=8) does not exist in your example.
$('#datatable').on('click', '.get', function() {
const tds = $(this).closest('tr').find('td');
tds.eq(3).text(prompt("Enter a new value for "+tds.eq(1).text()));
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table id="datatable">
<tr>
<th>no</th>
<th>name</th>
<th>address</th>
<th>ket</th>
<th>act</h>
</tr>
<tr>
<td>1</td>
<td>erik</td>
<td>lampus</td>
<td>Closed</td>
<td><button class="get">get</button>
</tr>
<tr>
<td>2</td>
<td>lupin</td>
<td>ggreek</td>
<td>open</td>
<td><button class="get">get</button>
</tr>
</table>
I am new to coding and am trying to make a table using values from another table.
For example, the following table has a column for "Contact" (names)
<table>
<tr>
<th>Role</th>
<th>Contact</th>
<th>Email</th>
</tr>
<tr>
<td>Role1</td>
<td>Person1 </td>
<td>Person1#xyz.com</td>
</tr>
<tr>
<td>Role2</td>
<td>Person2</td>
<td>Person2#xyz.com</td>
</tr>
</table>
My second table (ttask) has a list of tasks and has a column for the "Contact" assigned to a task. I would like to link the value for the Contact cells in the following table with its corresponding Contact in the 1st table so that if I change the Contact's name in the 1st table, it will update in all the Table ttask cells involving that Contact's name. How can I make this happen?
<table id="ttask">
<tr>
<th>Weeks Prior</th>
<th>Role</th>
<th>Contact</th>
<th>Task</th>
</tr>
<tr>
<td>16</td>
<td>AH</td>
<td>Person1</td>
<td>
What currently needs to be done. The task and what's involved blah blah
</td>
</tr>
</table>
Thank you so much!
first take different id for both table td and try this
$(document).ready(function(){
VAR abc = $(document.getElementById("tdidoffirsttable").innerHTML);
document.getElementById("td id of second table").innerHTML = abc;
});
The question is somewhat unclear because you didn't mention if you are willing to use html only or not. If you are willing to consider javascript, then this can work:
<p id="demo1">person1</p>
<p id="demo2">person2</p>
<script>
function myFunction() {
var str = document.getElementById("demo2").innerHTML;
document.getElementById("demo1").innerHTML = str;
}
myFunction();
</script>
Of course this is per row, if you data contains multiple lines then should be adapted by doing a loop in order to simplify.
I have a table like the following
the table as rowspans because for some users I need to have 2 lines (Like you see at column 'D')
I am trying to use datatables:
<table class="table table-bordered table-hover table-striped" id="myTable">
(...)
</table>
And I call this at the begining of the code:
<script>
$( document ).ready(function() {
$('#myTable').DataTable();
});
</script>
But I have this error:
TypeError: i is undefined
And the table is not like a datatable type!
Maybe it doesn't work with rowspans?
Any idea??
FWIW you can also get this error if you don't have the same number of <td></td> elements in every row. Make sure you aren't adding any rows with nav buttons or links or anything like that that may not be formatted the same way as the other rows.
jQuery DataTables plug-in doesn't support ROWSPAN attribute by default. However there is a RowsGroup plugin for jQuery DataTables that groups cells together to make them look like as if ROWSPAN attribute is used.
See this example for code and demonstration.
See jQuery DataTables – ROWSPAN in table body TBODY for more details.
For future referer.
It is because you are using Rowspan or colspan which is not supportable.
If you want to use colspan you can use it outside </tbody>.
Thanks.
This problem happens if your table is not well formed, for example you should have
<table>
<thead>
<th>
<tbody>
<tr>
<td>
And then the id of the table should not overlap with id of any thing else on the same page. Other wise you will get errors like i is udefined or c is undefined.
I'd say your table is not a data table because you have undefined data and the 'i' referred to is the internal iterator of the DataTable loop, the use of rowspans is the problem - I would redesign your table to have an entire row for each piece of data (in your example 250 would require an entire row with duplicate values for all other columns except D) - it is wholly possible to use css to hide values that are duplicated for the same visual effect, this would allow datatable filtering to still work on those rows (although you may need some hooks to reveal hidden data when these 'extra' rows are filtered).
I was facing the same issue. The main reason for the error is due to using the colspan & rowspan. Because the jQuery DataTables plug-in does not support them and hence causing the error.
TypeError: i is undefined
So, If you are using any colspan or rowspan within any <tr></tr> inside the <tbody></tbody> then make sure that each <tr></tr> having the same no of <td></td> for each row. If not, then repeat the <td style='display:none'></td> to match the same no e.g
<table border='1' cellspacing='2'>
<thead>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">name</td>
<td>200</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
<tr>
<td >300</td>
<td style='display:none'></td>
<td style='display:none'></td>
</tr>
</tbody>
</table>
I think by following the above suggestion will help you sure.
I have html that displays a table similar to:
<table>
<tr>
<th>col1</th>
<th>col2</ht>
</tr>
<tr>
<td>0001</td>
<td>Test</td>
</tr>
<tr>
<td colspan="2" id="detailsTable">
<table>
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>xxxxxx</td>
<td>xxxxxxx</td>
</tr>
</table>
</td>
</tr>
There is a column of expand and contract buttons on the outer table so that the nested table is only shown when the user clicks to expand.
The expansion works and the table gets displayed. However when when I try and remove the row from the outer table that contains the child table it doesn't work.
I had code like:
var rowIndex = $(this).parent().parent().prevAll().length;
$("table[id$=gvParentAccounts] tr").eq(rowIndex + 1).remove();
If the row only contains text it works as I'd like and removes the row, however if like in this case the row contains a table it is unable to remove the row as required.
I'm using ASP.Net and jQuery for this.
Thanks
Alan.
How about:
$(this).parent().parent().remove();
I'm not sure if this is exactly what you have, but here's a JSFiddle demonstrating that it works:
http://jsfiddle.net/9TQG9/1/
EDIT: Actually this:
$(this).parents("tr").eq(0).remove();
would be much nicer and more reliable. See here:
http://jsfiddle.net/9TQG9/2/
Using the JavaScript sample found in this stack overflow post you can have a button that automatically selects a table. This selected table can then be copied to the clipboard.
My users will be copying this data into an Excel template and do not need the header information (<th></th> or <thead></thead>).
My table looks something like this:
<table class="sortable">
<thead>
<tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
<tbody>
<tr><td>Bob</td><td>£12,000</td></tr>
<tr><td>Doug</td><td>£8,500</td></tr>
<tr><td>Sam</td><td>£9,200</td></tr>
<tr><td>Nick</td><td>£15,300</td></tr>
</tbody>
<tfoot>
<tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>
How would I go about unselecting the header information?
UDPATE1
The key is to select the tbody (assuming you Do not want tfoot).
<input type="image" src="table.png" name="image" onclick="selectElementContents( document.getElementById('theebody') );">
If the <table> has a <thead> and <tbody>, you could just select the <tbody>. However if you have header row(s) as sibling of other rows... here is a good start on how to set the range with more control.