I want to create a table with datatables and DOTNET MVC. How Can I create a row above the header that contains every select tag each column so I can filter the data? it looks like the image below
<table id="orderTable" class="table table-bordered table-hover">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Customer </th>
<th>Order date</th>
<th>Phone Number</th>
<th>Dish</th>
<th>Delivery Address</th>
<th>Message</th>
</tr>
</thead>
<tbody>
#foreach (var order in Model.Orders)
{
<tr>
<td>#order.OrderId</td>
<td>#order.CustomerName</td>
<td>#order.OrderDate</td>
<td>#order.PhoneNumber</td>
<td>#order.Dish</td>
<td>#order.DeliveryAddress</td>
<td>#order.Message</td>
</tr>
}
</tbody>
</table>
Related
how to make full align in center as it is only a single item in header , it should be like center heading in table
<table style="width:100%">
</tr>
<tr>
<th>Full</th>
</tr>
<tr>
<th>Total</th>
<th>Pass</th>
<th>Fail</th>
<th>Error</th>
<th>Skip</th>
</tr>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</table>
Use the colspan attribute on the <th> element. You should also wrap your <tr> (rows) that contain <th> (header) elements in a <thead> tag.
<table style="width:100%">
<thead>
<tr>
<th colspan="5">Full</th>
</tr>
<tr>
<th>Total</th>
<th>Pass</th>
<th>Fail</th>
<th>Error</th>
<th>Skip</th>
</tr>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<!-- Content here -->
</tbody>
</table>
I have two seperates tables: one for the header and one for the content. This is my table with only headers:
<table class="table table-sm table-bordered >
<thead>
<tr>
<th class="header-length">This is header one</th>
<th class="header-length">short</th>
<th class="header-length">X</th>
</tr>
</thead>
</table>
And this is my second table with the content
<table class="table table-sm table-bordered>
<tbody>
<tr>
<td>This content must align with header one</td>
<td>very short</td>
<td>Icon</td>
</tr>
</tbody>
</table>
I want the width of the header to align the content via JQuery I have used this selector to get the property
$('.header-length').width;
The header of the table cell must have the same width as the content whats inside <td>
How can I get the width of the th property to have the same width as the td with JQuery?
width is a function.
You can apply loop to get width of each th.
$('.header-length').each(function() {
console.log($(this).width());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-sm table-bordered">
<thead>
<tr>
<th class="header-length">This is header one</th>
<th class="header-length">short</th>
<th class="header-length">X</th>
</tr>
</thead>
</table>
--Edit--
const thWidthArr = [...document.querySelectorAll('.header-length')].map(th => th.offsetWidth);
const table2 = document.querySelectorAll('table')[1];
table2.querySelectorAll('td').forEach((td, i) => {
td.style.width = thWidthArr[i] + 'px';
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-sm table-bordered">
<thead>
<tr>
<th class="header-length">This is header one</th>
<th class="header-length">short</th>
<th class="header-length">X</th>
</tr>
</thead>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td>This content must align with header one</td>
<td>very short</td>
<td>Icon</td>
</tr>
</tbody>
</table>
i have a table there i have included a button for action , because of that the search is not working on that table.
Here is Demo:https://jsfiddle.net/pkxmnh2a/33/
$(document).ready(function() {
var table = $('#examples').DataTable();
$('a.toggle-vis').on('click', function(e) {
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible(!column.visible());
});
$('#examples tfoot th').each(function() {
var title = $('#examples thead th').eq($(this).index()).text();
$(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
});
table.columns().eq(0).each(function(colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
.widthind {
width: 30px;
height: 30px;
background-color: black;
color: white;
}
form {
margin: 0;
padding: 0;
display: -webkit-inline-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</tfoot>
</table>
The problem is you are heading thead tags within the rows of the table. This is not within the spec plus it won't work for Datatables. Plus Datatables doesn't support colspan or rowspan within the tbody (rows).
After fixing the buttons the search still doesn't work because of the selector you have on this line:
$('input', table.column(colIdx).footer()).on('keyup change', function () {
This is affecting the global search also. Compare your code to this example:
https://datatables.net/examples/api/multi_filter.html
Kevin
A thead never goes inside tbody.
Check this jsfiddle.net/nfycu6o5/1.
Correct html table:
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>
Your row is creating inside the thead element, the search given in datatable will search from the tbody element instead of thead
Eg: when you type on the searchbox, keyup event will trigger and find the results from table body and your table header always remains the same
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>
I have a html table generated by BIRT as follow:
<table id="myTableID">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</table>
I want to write a JavaScript code that reads this table and re-writes it in the following form: getting the first row of the table in a <thead> tag, and the rest of the table in the <tbody> tag:
<table id="myTableID">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tbody>
</table>
I have a basic knowledge about the JavaScript, but I have no clue how to proceed with such case. Please any help?
Use prependTo() to insert the thead element
Use append() to insert the first tr inside the thead
$('<thead></thead>').prependTo('#myTableID').append($('#myTableID tr:first'));
console.log($('#myTableID')[0].outerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table id="myTableID">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</table>
I have a table populated with Angular.js data:
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="t in tabledata">
<td>00{{t.id}}</td>
<td>{{t.firstName}}</td>
<td>{{t.lastName}}</td>
<td>{{t.userName}}</td>
</tr>
</tbody>
</table>
What I would like to do is add another class to the table tag if the number of rows of data > 10.
Is this possible, and how would I go about it? I know how to do this with a "flat" table in jQuery, but I'm new to the dynamic repeaters of Angular.
Use ng-class
<table ng-class="{'newClassName' : tabledata.length > 10 }">