I have a datatables element on my page with a hidden first column, and an empty column at the end to contain a button.
I'm trying to get the click event of that button to:
Hide the button,
Show a 'loading' icon - fontawesome icon already in the column
Retrieve the value of the hidden columns corresponding row
Show a success/fail icon - to be added but will be a fontawesome icon
CSHTML:
<div class="row">
<div class="col-sm-12">
<table class="table table-striped table-hover" id="SignOffTable">
<thead>
<tr>
<th>DATA_ID</th>
<th>KPI Name</th>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
<th>Date For</th>
<th>Value Type</th>
<th>Added By</th>
<th>Added On</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Items)
{
<tr>
<td>
#item.DATAID
</td>
<td>
#item.KPIHead
</td>
<td>
#item.Value1
</td>
<td>
#item.Value2
</td>
<td>
#item.Value3
</td>
<td>
#item.FromDate.ToString("dd/MM/yyyy")
</td>
<td>
#item.Type
</td>
<td>
#item.AddedBy
</td>
<td>
#item.AddedOn.ToString("dd/MM/yyyy")
</td>
<td id="ActionCol">
<button id="TableSignOff" class="btn btn-outline-success btn-sm" data-interaction="#item.DATAID">Sign Off</button>
<div id="Loader"><span id="Loading" class="fa fa-spinner fa-pulse fa-fw"></span></div>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
Script:
<script>
$(document).ready(function () {
$("div#Loader").hide();
var table = $('#SignOffTable').DataTable({
paging: true,
searching: false,
ordering: false,
pagingType: "simple_numbers",
lengthChange: false,
bfilter: true,
info: true,
"columnDefs": [
{ "visible": false, "targets": 0 }
]
});
});
$("#SignOffTable button").click(function () {
$(this).hide();
$('div#Loader').show();
var trElem = $(this).closest("tr");
var firstTd = $(trElem).children("td")[0];
alert($(firstTd).text())
})
</script>
However I can't seem to access the hidden column's data, or successfully hide the button/show the loading spinner. The spinner icon is hidden upon page load, and the button click will hide that button but will then show all the spinners in the column, rather than just that specific one.
You are creating duplicate IDs for your elements. This is invalid HTML and will cause your code to be confused about which elements it's trying to access.
Something more like this should help, using classes rather than IDs:
<td>
<button class="TableSignOff btn btn-outline-success btn-sm" data-interaction="#item.DATAID">Sign Off</button>
<div class="Loader" hidden>
<span class="fa fa-spinner fa-pulse fa-fw" ></span>
</div>
</td>
And
<script>
$(document).ready(function () {
var table = $('#SignOffTable').DataTable({
paging: true,
searching: false,
ordering: false,
pagingType: "simple_numbers",
lengthChange: false,
bfilter: true,
info: true,
"columnDefs": [
{ "visible": false, "targets": 0 }
]
});
});
$("#SignOffTable .TableSignOff").click(function () {
var btn = $(this);
btn.hide(); //hide the button
btn.parent().find(".Loader").show(); //show the loader within the button's parent td
alert(btn.data("interaction")); //output the DATAID
})
Also note that the loaders are hidden at the start by markup rather than code, so you don't get any momentary showing of the loaders before the code runs.
Related
I have a button in a row in datatables that when clicked, fires a function that at the end should trigger a form to submit. I am using $(document).on('click', '.row-button', function(){ ... }) I test it with console.log('clicked') and it logs for every click. But when I try to trigger the form to submit with $('#form_to_send'). trigger('submit')that is completely ignored and never fires.
If I take datatables of everything works as expected. What am I doing wrong?
itemTable = $('table#itemTable').DataTable({
"aaSorting": [],
columnDefs: [{
orderable: false,
targets: [0,1,10],
"scrollY": "10vh",
"scrollCollapse": true,
"scrollX": true
}]
});
$('.dataTables_length').addClass('bs-select'); code here
$(document).on('click', '.item-task', function(){
//get the route
page = $(this).attr('data-href');
//get the title of the action
title = $(this).attr('data-title');
//get the specific task
func = $(this).attr('data-func');
//set the title of the modal
modalTitle.innerText = title
$('#itemform').trigger("submit");
});
$(function() {
itemTable = $('table#itemTable').DataTable({
"aaSorting": [],
columnDefs: [{
orderable: false,
"scrollY": "10vh",
"scrollCollapse": true,
"scrollX": true
}]
});
//$('.dataTables_length').addClass('bs-select');
$('.item-task').on("click",function(){
console.log("hhhhh");
});
$(document).on('click', '.item-task', function() {
//get the route
page = $(this).attr('data-href');
//get the title of the action
//title = $(this).attr('data-title');
//get the specific task
//func = $(this).attr('data-func');
//set the title of the modal
//modalTitle.innerText = title
console.log(page);
$('#itemform').trigger("submit");
});
$("#itemform").on("submit",function(e){
alert("form submitetd")
e.preventDefault();
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="itemTable" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th> acion</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td><button class="item-task" data-href="#hello">click</button></td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td><button class="item-task" data-href="#world">click</button></td>
</tr>
</tbody>
</table>
<form id="itemform" >
<input type="text" value="test" />
</form>
Turns out I had a typo in another part of my code. That is indeed the correct syntax. Thank you #SadhilSpring for your help.
I want to disable some button with condition..
Im already disable that button but my pagination doesn't work. Both function is work but when im using both function in the same time, it is doesn't work. Can you help me?
This is my HTML/JSP
<div id="dt_example" class="example_alt_pagination">
<table class="table
id="data-table" >
<thead>
<tr>
<th class="text-center">Un-Used</th>
<th class="text-center">Total</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<s:iterator value="checkList" status="status">
<tr >
<td class="text-center" id="unUsedWarkat<s:property value="%{#status.index}"/>"><s:property value="unUsedWarkat" /></td>
<td class="text-center" id="totalWarkat<s:property value="%{#status.index}"/>"><s:property value="totalWarkat" /></td>
<td class="text-center"><s:property value="statusWarkat" /></td>
<td class="text-center">
<s:url id="delete" action="warkat_book_maintenance_delete" escapeAmp="false">
<s:param name="idwebTknUrl" value="idwebTknUrl" />
</s:url>
<a href="<s:property value="delete"/>">
<button onClick="disableDelete()" class ="btn btn-xs btn-primary" id="delete<s:property value="%{#status.index}"/>">
Delete
</button>
</a>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
Ths is my Javascript/jQuery
function myFunction() {
var x = document.getElementsByTagName("tr");
var i;
var unUsed;
var totalWarkat;
for (i = 0; i < x.length;i++) {
unUsed = document.getElementById('unUsedWarkat'+i).innerHTML;
totalWarkat = document.getElementById('totalWarkat'+i).innerHTML;
if(unUsed != totalWarkat){
document.getElementById("delete"+i).disabled = true;
}
else{
document.getElementById("delete"+i).disabled = false;
}
}
$(document).ready(function() {
myFunction();
var table = $('#data-table').DataTable({
"iDisplayLength": 5,
"sPaginationType": "full_numbers",
"sDom": '<"pull-left top"t><"col-sm-4">tr<"clear"><"bottom"ilp>',
"bSort" : false,
});
});
}
Thanks.. and sorry for bad english.
I am displaying a Jquery Datatable and i need to highlight the row, on row selection. I already figured that out using:
$('#example').dataTable({
select: true
})
The problem is, when i select a row, the information "Showing 1 to 10 of 19 entries1 row selected" is displayed on bottom left of the table. I just want to keep the "Showing 1 to 10 of 19 entries". I tried:
$('#example').dataTable({
select: true,
"bInfo": false
})
But, this removes the entire thing. Is there a workaround for this?
Use the below script: (Code is based on Fiddle)
$(document).ready( function () {
$('#table_id').DataTable({
paging: true,
select: true
});
var table = $('#table_id').DataTable();
table.select.info( false);
} );
You were on the right track with using info:false but it needs to be inside a select object that helps configure the select. I also noticed that you have to also specify the style option or it doesn't work so I used the default os style
more info here
To answer your comment you can select the first row by using row().select I have updated my answer to include that.
$(document).ready(function() {
let table = $('#table_id').DataTable({
paging: true,
select: {
style: 'os',
info: false
}
});
// select the first row
table.row(':eq(0)').select();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>XYZ</td>
<td>ABC</td>
</tr>
<tr>
<td>XYZ</td>
<td>ABC</td>
</tr>
<tr>
<td>XYZ</td>
<td>ABC</td>
</tr>
</tbody>
</table>
Angular Module
var MeasureSettingsApp = angular.module("MeasureSettingsApp", [])
Angular Controller To load data to Data Table
MeasureSettingsApp.controller("measureSettingsCtrl", function ($scope, measureSettingsService) {$scope.GetAllMeasureSettingsDetails = function () {
var getMeasureSettingsdata = measureSettingsService.getAllMeasureSettingsDetails();
getMeasureSettingsdata.then(function (measuresettings) {
$scope.MeasureSettingsModels = measuresettings.data;
}, function () {
alert('Error Occured While Getting Records');
});
}});
CHTML
able id="MeasureSettingsDetailsTable" class="table table-bordered table-striped">
<thead>
<tr>
<th>Setting Id</th>
<th>Basic Measure</th>
<th></th>
<th>Raw Material</th>
<th>Measure</th>
<th>Volume</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="measureSettings in MeasureSettingsModels">
<td>{{measureSettings.MeasureSettingsId}}</td>
<td>{{measureSettings.BasicMeasureName}}</td>
<td> Per 01 </td>
<td>{{measureSettings.RawMaterialName}}</td>
<td>{{measureSettings.MeasureName}}</td>
<td>{{measureSettings.Volume}}</td>
<td><input type="checkbox" ng-model="measureSettings.IsActive" disabled="disabled" /></td>
<td>
<button class="btn btn-sm btn-info" ng-click="EditMeasureSettings(measureSettings)"><i class="fa fa-pencil"></i></button>
<button class="btn btn-sm btn-danger" ng-click="DeleteMeasureSettings(measureSettings)"><i class="fa fa-trash"></i></button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Setting Id</th>
<th>Basic Measure</th>
<th></th>
<th>Raw Material</th>
<th>Measure</th>
<th>Edit</th>
</tr>
</tfoot>
</table>
Jquery Call For Data Table
$(function () {
// $("#CategoryDetailsTable").DataTable();
$('#MeasureSettingsDetailsTable').DataTable({
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false
});
});
Data loading through angular ng-repeat works fine. rows also appear in jquery data table ,but end of the table always displaying No Data Available In Table,and if i click sorting button all ng-repeat rows are suddenly disappear. but when i static the data in data table using like <tr> <td> some data </td> </tr> it works completely fine
The problem is in sort functionality. When you set array equal to something you break Angular reference and it thinks that this is new object...
When you work with angular array you should reset it length and push new values.
var getMeasureSettingsdata = measureSettingsService.getAllMeasureSettingsDetails();
getMeasureSettingsdata.then(function (measuresettings) {
$scope.MeasureSettingsModels.length = 0;
$scope.MeasureSettingsModels.push(measuresettings.data);
}, function () {
alert('Error Occured While Getting Records');
});
Don't forget to update you sort function.
I have a table whose values are looped in and a button in each row that I am attempting to use to deactivate that row if clicked:
<table id="categoryList" class="table">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Categories)
{
<tr>
<td>#item.id</td>
<td>#item.name</td>
<td><button class="btn btn-default pull-left" id="btn-deactivate">Deactivate</button></td>
</tr>
}
</tbody>
</table>
The rows are clickable at this point due to this javascript:
$("#categoryList > tbody > tr").click(function (event) {
$("#categoryModal #categoryId").val($(event.target).parent().children()[0].innerText);
$("#categoryModal #categoryName").val($(event.target).parent().children()[1].innerText);
$("#categoryModal .deleteButton").attr("href", $("#colDelUrl").val() + "?categoryId=" + $(event.target).parent().children()[0].innerText);
$("#categoryModal .deleteButton").show();
$("#categoryModal").modal({ show: true, backdrop: true });
});
The goal is to have the button deactivate (disable so it won't be clickable) the selected row when clicked and then reactivate the row on the second click.
Add active class at table rows.
<table id="categoryList" class="table">
<thead>
<tr>
<th>Category ID</th>
<th>Category Name</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Categories)
{
<tr class="active">
<td>#item.id</td>
<td>#item.name</td>
<td><button class="btn btn-default pull-left" id="btn-deactivate">Deactivate</button></td>
</tr>
}
</tbody>
</table>
make click on row active only if row has class="active":
$("#categoryList > tbody > tr.active").click(function (event) {
$("#categoryModal #categoryId").val($(event.target).parent().children()[0].innerText);
$("#categoryModal #categoryName").val($(event.target).parent().children()[1].innerText);
$("#categoryModal .deleteButton").attr("href", $("#colDelUrl").val() + "?categoryId=" + $(event.target).parent().children()[0].innerText);
$("#categoryModal .deleteButton").show();
$("#categoryModal").modal({ show: true, backdrop: true });
});
siwitch on/off click on rows by changing tr class:
$("#btn-deactivate").click(event)
{
var target = $( event.currentTarget );
var targetRow= target.closest( 'tr' );
if (targetRow.hasClass( "active" ))
{
targetRow.removeClass( "active" ).addClass( "inactive" );
}
else
{
targetRow.removeClass( "inactive" ).addClass( "active" );
}
}