I am using dataTables.js from https://datatables.net/ I am also using their responsive extension , but I can not get the table to properly responsively resize. Any insight would be grand.
The table overflows the window.
If you expand it all the way out so all the columns are shown, it doesn't even start hiding columns until the 3rd column is off screen
I have created a jsfiddle with my code.
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#Table_Assets tfoot th').each(function() {
var title = $('#Table_Assets thead th').eq($(this).index()).text();
$(this).html('<input type="text" style="max-width:80px;" />');
});
// DataTable
var table = $('#Table_Assets').DataTable({
responsive: true,
"autoWidth": false,
"order": [
[13, "desc"]
],
initComplete: function() {
var r = $('#Table_Assets tfoot tr');
r.find('th').each(function() {
$(this).css('padding', 8);
});
$('#Table_Assets thead').append(r);
$('#search_0').css('text-align', 'center');
},
});
$('#Table_Assets').resize()
// Apply the search
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
that.search(this.value)
.draw();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link href="https://cdn.datatables.net/responsive/1.0.6/css/dataTables.responsive.css" rel="stylesheet">
<script src="https://cdn.datatables.net/responsive/1.0.6/js/dataTables.responsive.js" type="text/javascript"></script>
<div style="max-width:100%; margin-left:auto; margin-right:auto; background-color:#c4bcbc; border-radius:15px; padding:10px; color:black" class="center">
<table id="Table_Assets" class="outerroundedborder dt-responsive" style="width:auto; margin-bottom: 15px; margin-left:auto; margin-right:auto">
<thead>
<tr style="white-space:nowrap;">
<th scope="col">Name:</th>
<th scope="col">Type:</th>
<th scope="col">Manufacturer</th>
<th scope="col">Supplier</th>
<th scope="col">Quantity</th>
<th scope="col">Serial Number</th>
<th scope="col">Location:</th>
<th scope="col">Comments</th>
<th scope="col">Computer Name</th>
<th scope="col">Room Number</th>
<th scope="col">Active</th>
<th scope="col">Tech Fee</th>
<th scope="col">Specifications</th>
<th scope="col">Deploy Date</th>
<th scope="col">User</th>
<th scope="col">Department</th>
<th scope="col">Building</th>
<th scope="col">Tickets</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:auto;">Doom DOOM!</td>
<td>Laptop</td>
<td>HP</td>
<td>none</td>
<td>33</td>
<td>sdfg</td>
<td>sdfg</td>
<td>dfhgdfh</td>
<td>Nebulus</td>
<td>2345</td>
<td>True</td>
<td>True</td>
<td>Stuff from space</td>
<td>5/30/2015</td>
<td>Michaels | Joey</td>
<td>Staff</td>
<td></td>
<td>
<br />
<div class="grey">No tickets found</div>
</td>
</tr>
<tr>
<td style="width:auto;">Dr. Von Doom</td>
<td>Laptop</td>
<td>HP</td>
<td>none</td>
<td>0</td>
<td>123412341234</td>
<td>Dr. Doom's Lair</td>
<td></td>
<td>Spiderman</td>
<td>42</td>
<td>True</td>
<td></td>
<td>Spidey sense is tingling. ^_^</td>
<td>6/18/2015</td>
<td>Michaels | Joey</td>
<td>Staff</td>
<td>AIC Faculty</td>
<td>
<br />
<div class="grey">No tickets found</div>
</td>
</tr>
</tbody>
<tfoot>
<tr class="sortbottom">
<th scope="col">Name:</th>
<th scope="col">Type:</th>
<th scope="col">Manufacturer</th>
<th scope="col">Supplier</th>
<th scope="col">Quantity</th>
<th scope="col">Serial Number</th>
<th scope="col">Location:</th>
<th scope="col">Comments</th>
<th scope="col">Computer Name</th>
<th scope="col">Room Number</th>
<th scope="col">Active</th>
<th scope="col">Tech Fee</th>
<th scope="col">Specifications</th>
<th scope="col">Deploy Date</th>
<th scope="col">User</th>
<th scope="col">Department</th>
<th scope="col">Building</th>
<th scope="col">Tickets</th>
</tr>
</tfoot>
</table>
</div>
I have the same issue, I'm using the jquery DataTables 1.10.7 and the extension Responsive 1.0.6, I solved by adding a line in the "dataTables.responsive.js" in the _resize function, about line 560.
Add the next line at the end of the function:
$(dt.table().node()).removeAttr('style');
That should work.
The function most look like this:
_resize: function() {
var dt = this.s.dt;
var width = $(window).width();
var breakpoints = this.c.breakpoints;
var breakpoint = breakpoints[0].name;
var columns = this.s.columns;
var i, ien;
// Determine what breakpoint we are currently at
for (i = breakpoints.length - 1; i >= 0; i--) {
if (width <= breakpoints[i].width) {
breakpoint = breakpoints[i].name;
break;
}
}
// Show the columns for that break point
var columnsVis = this._columnsVisiblity(breakpoint);
// Set the class before the column visibility is changed so event
// listeners know what the state is. Need to determine if there are
// any columns that are not visible but can be shown
var collapsedClass = false;
for (i = 0, ien = columns.length; i < ien; i++) {
if (columnsVis[i] === false && !columns[i].never) {
collapsedClass = true;
break;
}
}
$(dt.table().node()).toggleClass('collapsed', collapsedClass);
dt.columns().eq(0).each(function(colIdx, i) {
dt.column(colIdx).visible(columnsVis[i]);
});
$(dt.table().node()).removeAttr('style');
},
Best regards.
Related
The .clear() function is not working for my code. I don't know how to manipulate the tags in jQuery.
event:
function (){
var $table = $('#table')
if($(".filter-control").is(":visible")){
$(".filter-control").hide()
$table.bootstrapTable('refresh')
$(".filter-control").clear();
} else {
$(".filter-control").show()
$table.bootstrapTable('refresh')
$(".filter-control").clear();
}
}
The interesting Html code is
<table>
<body>
<table id="table">
<thead>
<tr>
<th data-field="id" data-filter-control="input" data-width ="400" >Id</th>
<th data-field="name" data-filter-control="input" data-width ="400" >Item Name</th>
<th data-field="price"data-filter-control="input" data-width ="400" >Item Price</th>
</tr>
</thead>
</table>
<script>
function buttons(){
return {
btnUsersAdd: {
text: 'Enable/Disable Filters',
icon:'fa-filter',
event: function (){
if($(".filter-control").is(":visible")){
$(".filter-control").hide()
$(".filter-control").clear();
$table.bootstrapTable('refresh')
} else {
$(".filter-control").show()
$(".filter-control").clear();
$table.bootstrapTable('refresh')
}
}
}
}
}
</script>
I found the answer to my own query,
1.Add the attribute data-show-filter-control-switch="true" to table
2. make sure there is no data-height attribute as the height of the table changes and it will prevent that.
I want to add an aria-hidden attribute in this certain who have the a.actionSort.
<table class="dataTable" id="resulttable" name="resulttable">
<thead>
<tr>
<th name="bookID" class="sortable"> Book ID</th>
<th name="bookName" class="sortable"> <a class="actionSort"> Book Name</a></th>
<th name="category" class="sortable"> Category</th>
<th name="price" class="sortable"> Price</th>
</tr>
</thead>
<tbody id="resulttable_body">
<tr>
<td>1</td>
<td>Computer Architecture</td>
<td>Computers</td>
<td>125.60</td>
</tr>
<tr>
<td>2</td>
<td>Asp.Net 4 Blue Book</td>
<td>Programming</td>
<td>56.00</td>
</tr>
<tr>
<td>3</td>
<td>Popular Science</td>
<td>Science</td>
<td>210.40</td>
</tr>
</tbody>
</table>
I tried this script but it always add the aria-hidden true in all
var y = $('.dataTable').find('th').length;
for (var i = 0; i < y; i++) {
if ($( ".dataTable th a" ).hasClass( "actionSort" ) === true) {
$( ".dataTable th").attr( "aria-hidden", "true" );
}
}
You can use this to refer to the element. Also I simplified your loop.
$('.dataTable th a.actionSort').each(function(){
$(this).parent().attr( "aria-hidden", "true" );
});
Since you are using jQuery you can do something like
$('.dataTable').find('th a.actionSort')
.closest('th')
.attr( "aria-hidden", "true" );
or you can use has
$('.dataTable').find('th:has(a.actionSort)')
.attr( "aria-hidden", "true" );
to do the loop
var ths = $('.dataTable').find('th');
ths.each(function() {
var th = $(this);
var isActive = th.find("a").hasClass('actionSort');
if (isActive) {
th.attr( "aria-hidden", "true" );
}
});
I want to filter my data in tabulator table based on cell style, ex., show all cells with validation failures.
All the examples in the documentation are to filter based on data and the custom functions don't pass cell object to filter on.
Here's example in codepen
var columns = [];
$(function () {
$("#table thead tr th").each(function (i, cell) {
var name = $(cell).text();
var field = name.toLowerCase().replace(" ", "_");
columns.push({
title: name,
field: field,
editor: "input",
validator: "required"
});
});
var table = new Tabulator("#table", {
layout: "fitColumns",
validationMode: "highlight",
columns: columns
});
table.validate();
});
body {
margin: 20px;
}
table {
font-size: 14px;
}
.tabulator-validation-fail {
background: #f4433624;
}
<link href="https://unpkg.com/tabulator-tables#4.7.2/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables#4.7.2/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Mobile</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jordan</td>
<td>Talbot</td>
<td>Jordan.Talbot#ex.ai</td>
<td>408 345 3433</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Nico</td>
<td>Rocha</td>
<td>Nico.Rocha#ex.ai</td>
<td>408 445 5656</td>
<td>New York</td>
</tr>
<tr>
<td>Cienna</td>
<td>Bryan</td>
<td>Cienna.Bryan#ex.ai</td>
<td>210 454 7799</td>
<td>Austin</td>
</tr>
<tr>
<td>Vinny</td>
<td>Hood</td>
<td>Vinny.Hood#ex.ai</td>
<td>540 672 2585</td>
<td></td>
</tr>
<tr>
<td>Jay</td>
<td>Lennon</td>
<td>Jay.Lennon#ex.ai</td>
<td></td>
<td>Boston</td>
</tr>
<tr>
<td>Helen</td>
<td>Eaton</td>
<td>Helen.Eaton#ex.ai</td>
<td></td>
<td>Chicago</td>
</tr>
</tbody>
</table>
Get all line objects with the rowFormatter object and use the getElement method to get the line element <tr> along with validate to check whether that line is valid or not, like this:
var columns = [];
$(function () {
$("#table thead tr th").each(function (i, cell) {
var name = $(cell).text();
var field = name.toLowerCase().replace(" ", "_");
columns.push({
title: name,
field: field,
editor: "input",
validator: "required"
});
});
var table = new Tabulator("#table", {
layout: "fitColumns",
validationMode: "highlight",
columns: columns,
rowFormatter: function(row) {
let valid = row.validate() // if valid, returns true
if(valid === true) {
$(row.getElement()).css('display', 'none')
}
}
});
table.validate();
});
body {
margin: 20px;
}
table {
font-size: 14px;
}
.tabulator-validation-fail {
background: #f4433624;
}
<link href="https://unpkg.com/tabulator-tables#4.7.2/dist/css/tabulator.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/tabulator-tables#4.7.2/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>Mobile</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jordan</td>
<td>Talbot</td>
<td>Jordan.Talbot#ex.ai</td>
<td>408 345 3433</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Nico</td>
<td>Rocha</td>
<td>Nico.Rocha#ex.ai</td>
<td>408 445 5656</td>
<td>New York</td>
</tr>
<tr>
<td>Cienna</td>
<td>Bryan</td>
<td>Cienna.Bryan#ex.ai</td>
<td>210 454 7799</td>
<td>Austin</td>
</tr>
<tr>
<td>Vinny</td>
<td>Hood</td>
<td>Vinny.Hood#ex.ai</td>
<td>540 672 2585</td>
<td></td>
</tr>
<tr>
<td>Jay</td>
<td>Lennon</td>
<td>Jay.Lennon#ex.ai</td>
<td></td>
<td>Boston</td>
</tr>
<tr>
<td>Helen</td>
<td>Eaton</td>
<td>Helen.Eaton#ex.ai</td>
<td></td>
<td>Chicago</td>
</tr>
</tbody>
</table>
I would like to get the values in each cell in table row which is selected using a checkbox.
Scenario: Whenever user clicks the show table button, my page is dynamically loaded with some data from tables, which has columns like checkbox, Item name, Item code, Quantity, Rejected and Accepted. Now I want to get the values of selected rows when the user clicks the button called "save".
<script type="text/javascript">
$(document).ready(function() {
$("#tablediv").hide();
$("#showTable").click(function(event){
$.post('PopulateTable',{grn : $('#grn').val()},function(responseJson) {
if(responseJson!=null){
$("#itemtable").find("tr:gt(0)").remove();
var table1 = $("#itemtable");
$.each(responseJson, function(key,value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).html('<input type="checkbox" />');
rowNew.children().eq(1).text(value['itemname']);
rowNew.children().eq(2).text(value['itemcode']);
rowNew.children().eq(3).text(value['supplier']);
rowNew.children().eq(4).text(value['receivedqty']);
rowNew.children().eq(5).html('<input type="text" class="tb2"/>');
rowNew.children().eq(6).html('<input type="text" class="tb2"/>');
rowNew.children().eq(7).html('<input type="text" class="tb2"/>');
rowNew.appendTo(table1);
});
}
});
$("#tablediv").show();
});
});
<br/>
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center">
<tr>
<td><input type="checkbox" /></td>
<th scope="col">Item name</th>
<th scope="col">Item code</th>
<th scope="col">Supplier</th>
<th scope="col">Received qty</th>
<th scope="col">Accepted qty</th>
<th scope="col">Rejected qty</th>
<th scope="col">Remarks</th>
</tr>
</table>
</div>
$(document).ready(function(){
// code to read selected table row cell data (values).
$("#itemtable").on('click','.btnSelect',function(){
// get the current row
alert("i am inside select");
// get the current row
var currentRow=$(this).closest("tr");
var col1=currentRow.find("td:eq(0)").text(); // get SI no from checkbox
var col2=currentRow.find("td:eq(1)").text(); // get item name
var col3=currentRow.find("td:eq(2)").text(); // get item code
var col4=currentRow.find("td:eq(3)").text(); // get supplier
var col5=currentRow.find("td:eq(4)").text(); // get received qty
var col6=currentRow.find("td:eq(5)").text(); // get accepted qty
var col7=currentRow.find("td:eq(6)").text(); // get rejected qty
var col8=currentRow.find("td:eq(7)").text(); // get remarks
var data=col1+"\n"+col2+"\n"+col3+"\n"+col4+"\n"+col5+"\n"+col6+"\n"+col7+"\n"+col8;
alert(data);
});
});
<!--btnSelect is class of checkbox -->
I come across below exaple to get all value of table cell of checked row.
$('.chk').change(function () {
if($(this).is(':checked'))
{
$(this).closest('tr').find('td').each(
function (i) {
console.log($(this).text());
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tablediv">
<table border="1" id="itemtable" align="center">
<tr>
<th>check</th>
<th scope="col">Item name</th>
<th scope="col">Item code</th>
<th scope="col">Supplier</th>
<th scope="col">Received qty</th>
<th scope="col">Accepted qty</th>
<th scope="col">Rejected qty</th>
<th scope="col">Remarks</th>
</tr>
<tr>
<td><input type="checkbox" class="chk" ></td>
<td>Pencil</td>
<td>101</td>
<td>Supplier</td>
<td>10</td>
<td>5</td>
<td>5</td>
<td>Remarks</td>
</tr>
<tr>
<td><input type="checkbox" class="chk" ></td>
<td>Pen</td>
<td>102</td>
<td>Supplier</td>
<td>25</td>
<td>20</td>
<td>5</td>
<td>Remarks</td>
</tr>
</table>
</div>
First give "name" to your checkbox, such as :
<input type="checkbox" name="case[]" />
JS code:
var values = new Array();
$("#saveButton").click(function(){
$.each($("input[name='case[]']:checked"), function() {
var data = $(this).parents('tr:eq(0)');
values.push({ 'Item name':$(data).find('td:eq(1)').text(), 'Item code':$(data).find('td:eq(2)').text() , 'Supplier':$(data).find('td:eq(3)').text()});
});
console.log(JSON.stringify(values));
});
Please check out the EXAMPLE
When my page load I have one row,by clicking add button it will add one more row.
But from the below code the date picker is showing only for the first row not for dynamically adding rows.
If I remove 'portion 2' code then reverse will work.I need both.Please help.
//===========portion 1============
var i = 0;
$(document).ready(function() {
$("#add").click(function() {
i++;
$(".normal-tble tbody tr:first").clone().find("input,img").each(function() {
var tempId = $(this).attr("id");
var name_Attr = $(this).attr("name");
$(this).attr("id",$(this).attr("id")+"_"+(i))
if(tempId!='availability' && tempId!='remove') {
$(this).attr("name",name_Attr.replace('0',i));
if(tempId=='number') {
$(this).on("blur",isValidNumber);
$(this).val(0);
} else {
$(this).val('');
}
if(tempId=='expectedServiceDate') {
$(this).datepicker({changeMonth: true,changeYear: true,showButtonPanel: true,dateFormat: 'yy-mm-dd',minDate:0});
}
} else if(tempId=='availability') {
$(this).on("click",checkAvaialability);
} else if(tempId=='remove') {
$(this).on("click",onRemove);
}
}).end().appendTo(".normal-tble");
});
//=======portion 2===============
$('#expectedServiceDate').datepicker({changeMonth: true,changeYear: true,showButtonPanel: true,dateFormat: 'yy-mm-dd',minDate:0});
//==============================================================
<table class="normal-tble">
<thead>
<tr>
<th scope="col">Number</th>
<th scope="col">For Service</th>
<th scope="col">Expected Service Date</th>
<th scope="col">Comments</th>
<th scope="col">Check Availability</th>
<th scope="col">Remove</th>
<th scope="col"><img src="<c:url value="/resources/images/add2.png"/>" width="18" height="17" id="add"></th>
</tr>
</thead>
<tbody>
<tr class="second">
<td style="text-align:center"><form:input path="premiumList[0].number" id="number" class="tfl-02 qtyText"/></td>
<td style="text-align:center"><form:input path="premiumList[0].forService" id="forService" class="tfl-02"/></td>
<td style="text-align:center"><form:input path="premiumList[0].expectedServiceDate" id="expectedServiceDate" class="tfl-02" readonly="true"/></td>
<td style="text-align:center"><form:input path="premiumList[0].comments" id="comments" class="tfl-02"/></td>
<td style="text-align:center"><img src="<c:url value="/resources/images/view.png"/>" alt="view" id="availability"></td>
<td style="text-align:center"><img src="<c:url value="/resources/images/remove.png"/>" alt="remove" id ="remove"></td>
<td></td>
</tr>
</tbody>
</table>
That's because the element is not yet created. In order to have an event to the dynamic rows you need this:
$("body").on("focus", ".mydate", function () {
$(this).datepicker({
todayBtn: "linked"
})
});