I'm currently trying to make my other table items grey out when i select the third option in my table menu which is called "closed" with an id of 3.
This is in the status drop down menu as seen here.
I'm trying to figure out how to make the CaseID, date, name, details and Status sections become greyed out, when the status part of the table record is "closed".
<% include ../partials/header.ejs %>
<% include ../partials/main_nav.ejs %>
<!-- MAIN CONTENT -->
<div class="jumbotron">
<div class="container">
<div class="reportContainer">
<div class="row">
<div class="col-md-offset-1 col-md-10">
<h1 class="display-4">Incident Reports</h1>
<br />
<!-- Details of the table and how to submit new reports -->
<p>The information below is the current incident reports that have been submitted.<p>
<p> To add a new report, click here or use the <strong>Create a Report</strong> button below.<br>
To edit a report, a report, use the Edit button.<br>
To delete a report, click the <strong>Delete</strong> button. This is instant, permanent, and will not ask for confirmation.</p>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>CaseID</th>
<th class="text-center">Date</th>
<th class="text-center">Name</th>
<th class="text-center">Details</th>
<th class="text-center">Status</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
<!-- Template Row -->
<% for (let count = 0; count < incident_reports.length; count++) { %>
<tr>
<td ><div id="creditcard"><%= incident_reports[count].caseID %></div></td>
<td class="text-center"><div id="creditcard"><%= incident_reports[count].date %></div></td>
<td class="text-center" ><div id="creditcard"><%= incident_reports[count].name %></div></td>
<td class="text-center" ><div id="creditcard"><%= incident_reports[count].details %></div></td>
<td class="text-center"><div id="creditcard">test<%= incident_reports[count].Status %></div></td>
<td class="text-center">
<a href="/reports/edit/<%= incident_reports[count]._id %>" class="btn btn-primary" style="background-color: #f59e2e; border-color:#f59e2e;"
><i class="fa fa-plus"></i> Edit</a
>
<a href="/reports/delete/<%= incident_reports[count]._id %>" class="btn btn-warning btn-sm" style="background-color: #ff3e3e; color: white; border-color: #ff3e3e;">
<i class="fas fa-trash-alt"></i> Delete</a>
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Status
</button>
<ul class="dropdown-menu" onChange="selectChanged()">
<li><a class="dropdown-item" href="/reports/inprogress/<%= incident_reports[count]._id %>" id="payment-method" value="1">In Progress</a></li>
<li><a class="dropdown-item" href="/reports/dispatched/<%= incident_reports[count]._id %>" id="payment-method" value="2">Dispatched</a></li>
<li><a class="dropdown-item" href="/reports/closed/<%= incident_reports[count]._id %>" id="payment-method" value="3">Closed</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<% } %>
</tbody>
</table>
</div>
</main>
<i class="fa fa-plus"></i> Create a Report
<div class="col-md-offset-1 col-md-10 text-center">
<ul class="pagination pagination-lg pager" id="myPager"></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function selectChanged() {
var x = document.getElementById("payment-method").value;
document.getElementById("creditcard").disabled = (x == 1);
}
</script>
<% include ../partials/bottom_nav.ejs %>
<% include ../partials/footer.ejs %>
Thank you in advance.
HTML
add data-status attribute for every rows to keep track of current status.
...
<tbody>
<!-- Template Row -->
<% for (let count = 0; count < incident_reports.length; count++) { %>
<tr data-status="<%= incident_reports[count].Status %>">
<td>
<span> <!-- 👈 add span tag to change text color. -->
<%= incident_reports[count].caseID %>
</span>
</td>
<td class="text-center" for="payment-method">
<span>
<%= incident_reports[count].date %>
</span>
</td>
<td class="text-center">
<span>
<%= incident_reports[count].name %>
</span>
</td>
<td class="text-center">
<span>
<%= incident_reports[count].details %>
</span>
</td>
<td class="text-center">
<span>
<%= incident_reports[count].Status %>
</span>
</td>
<td class="text-center">
<a href="/reports/edit/<%= incident_reports[count]._id %>" class="btn btn-primary" style="background-color: #f59e2e; border-color:#f59e2e;"><i class="fa fa-plus"></i> Edit</a
>
<a href="/reports/delete/<%= incident_reports[count]._id %>" class="btn btn-warning btn-sm" style="background-color: #ff3e3e; color: white; border-color: #ff3e3e;">
<i class="fas fa-trash-alt"></i> Delete</a>
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Status
</button>
<ul class="dropdown-menu" onChange="selectChanged()">
<li><a class="dropdown-item" href="/reports/inprogress/<%= incident_reports[count]._id %>" id="1">In Progress</a></li>
<li><a class="dropdown-item" href="/reports/dispatched/<%= incident_reports[count]._id %>" id="2">Dispatched</a></li>
<li><a class="dropdown-item" href="/reports/closed/<%= incident_reports[count]._id %>" id="3">Closed</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</td>
</tr>
<% } %>
</tbody>
...
CSS
add this rule in css to select <tr> that has data-status="Closed".
...
tbody tr[data-status="Closed"] td > span {
color: gray;
}
...
A table is generated with PHP. The division of the table should be retained as far as possible. The table should be passed as in the example with selectable options.
$(function(){
$(".dropdown-menu li a").click(function(){
$(".btn:nth-child(2n)").text($(this).text());
$(".btn:nth-child(2n)").val($(this).text());
});
});
$(function(){
$(".dropdown-menu").on('click', 'li a', function(){
$(".btn:nth-child(2n)").text($(this).text());
$(".btn:nth-child(2n)").val($(this).text());
});
});
#import url("https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css");
#import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
li i {display:none}
table {float:left}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
<button class="btn">Please Select From List</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li><a href="#" class="" data-value=1>
<p><span> Option I</span></p>
</a> </li>
<li>
<li><a href="#" class="" data-value=2>
<p><span> Option II <i class="bi bi-info-square-fill"></i></span></p>
</a> </li>
<li>
<li>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><strong>Option III</strong></td>
<td align="right"><a tabindex="-1" href="#"><i class="bi bi-info-square-fill"></i></a></td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
I have prepared an example how it should look like. So far, however, only text is transferred. If possible, the entire table including images should be displayed.
Option I is the basis for selectable options.
Option II is the current view with icon. That would be an emergency
solution if no table can be passed.
Option III is the current representation with the pass table with no
selectable option.
other suggestions are welcome
instead of the link, the entire table was now passed as an option. now the entire table can be selected as an option.
$(function(){
$(".dropdown-menu li table").click(function(){
$(".btn:nth-child(2n)").html($(this).html());
$(".btn:nth-child(2n)").val($(this).html());
});
});
$(function(){
$(".dropdown-menu").on('click', 'li table', function(){
$(".btn:nth-child(2n)").html($(this).html());
$(".btn:nth-child(2n)").val($(this).html());
});
});
in full it looks like this
$(function(){
$(".dropdown-menu li table").click(function(){
$(".btn:nth-child(2n)").html($(this).html());
$(".btn:nth-child(2n)").val($(this).html());
});
});
$(function(){
$(".dropdown-menu").on('click', 'li table', function(){
$(".btn:nth-child(2n)").html($(this).html());
$(".btn:nth-child(2n)").val($(this).html());
});
});
#import url("https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css");
#import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
li i {display:none}
table {float:left}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button>
<button class="btn">Please Select From List</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
<li>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><strong>Option I</strong></td>
<td align="right"><a tabindex="-1" href="#"><i class="bi bi-info-square-fill"></i></a></td>
</tr>
</tbody>
</table>
</li>
<li>
<li>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><strong>Option II</strong></td>
<td align="right"><a tabindex="-1" href="#"><i class="bi bi-info-square-fill"></i></a></td>
</tr>
</tbody>
</table>
</li>
<li>
<li>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><strong>Option III</strong></td>
<td align="right"><a tabindex="-1" href="#"><i class="bi bi-info-square-fill"></i></a></td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
I am using "jquery": "^3.4.0" and DataTables 1.10.18.
I am having the following table:
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(() => {
var c = this.id
console.log(c)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
I am trying to put a click listener on the clicked edit button.
However, I currently only get undefined back. Instead I would like to get the id within the first column back.
Any suggestions what I am doing wrong?
I just use your code as example and make some changes in jQuery.
Please try this, hope this works for you.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
$(document).on("click", "#edit-row", function(){
console.log('Id : ', $(this).closest('.text-center').siblings('.sorting_1').text());
alert('Id : '+ $(this).closest('.text-center').siblings('.sorting_1').text());
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
The this in the click handler was pointing to the global Window object because you were using arrow function, change it to a regular callback and it will work as expected.
Check this answer for more information.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(function(event) {
var c = this.id;
console.log(c)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
You are using arrow functions that will change the scope of this to window so to reference the scope of the element, easiest way is to avoid arrow functions for those handlers and simply use traditional functions:
$(document).ready(function() {
var table = $('.datatable-responsive').DataTable();
});
$("#edit-row").click(function() {
var c = this.id
console.log(c)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
However, if you still want the arrow functions then pass a event parameter to the arrow function and get the element reference using event.target.
To get the id that you have in the first column you can find the closest table row then select the first table column to get that text value.
You need to use a class selector for all those rows instead of id selector #edit-row as id should be unique in the HTML page.
$(document).ready(() => {
var table = $('.datatable-responsive').DataTable();
});
$(".edit-row").click((e) => {
var c = e.target.id
var hashId = $(e.target).closest('tr').find('td:eq(0)').text().trim();
console.log(hashId)
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Image</th>
<th>Profile</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>-2</td>
<td><span class="badge badge-success">Posted</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Joe</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>99</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Cool Post</td>
<td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Brad</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>10</td>
<td><span class="badge badge-secondary">Queued</span></td>
<td>Awesome Post</td>
<td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
<td>Tom</td>
<td class="text-center">
<div class="list-icons">
<div class="dropdown">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i> Edit
<i class="icon-bin"></i> Delete
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
DataTables has own solution, you can use select extension to get selected row data, there is an example very useful for you
Considering your ultimate goal (editable DataTable), I'll allow myself to suggest few improvements to your app, so that you don't really need to get id of clicked row and do all the HTML heavy lifting on your own.
Instead of using external AJAX-call to populate your DataTables, I'd recommend to use embedded ajax option
$("#posts").DataTable({
//specify URL for AJAX-call that retrieves table data in format of array of arrays or array of objects
//where each element/property corresponds to table columns, ajax.dataSrc property should be set to ''
//if data array encompassed into 'data' property (default format), 'dataSrc' can be ommitted
...
ajax: {
url: "/getdata"
dataSrc: ''
}
})
use columns.render option to modify cell contents, to make it appear as a badge or drop-down menu
dataTable = $("#posts").DataTable({
...
columns: [
{ data: "id", title: "Id" },
{
data: "status",
title: "Status",
//render status as a badge, having class, based on status value
render: data => `<span class="badge ${data == "posted" ? "badge-success" : "badge-secondary"}">${data}</span>`
}
...
]
})
and essential point - leave row number mark within dropdown element upon rendering, so you can access this value later on as you need to edit/delete table row
$("#posts").DataTable({
...
columns: [
...
{
data: null,
title: "Actions",
//render 'Actions' column as a drop-down menu wrapper,
//appending 'row' attribute with corresponding row number
//as a value
render: (data, type, row, meta) => `
<div class="dropdown" row="${meta.row}">
<a href="#" class="list-icons-item" data-toggle="dropdown">
<i class="icon-menu9"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<i class="icon-pencil"></i>Edit
<i class="icon-bin"></i>Delete
</div>
</div>
`
}
]
});
use above row numbers in order to modify target table row, using DataTables API methods (e.g. row().remove() for deletion), I'll use simplest example (deletion of the row in the front-end), since you didn't share much details as for whether you want to modify both back end and front end data or only the latter
//delete-row callback as an example of how to use row attribute to modify necessary table row
$("#posts").on("click", ".delete-row", function () {
//grab dropdown wrapper and obtain row number
const rowNumber = $(this)
.closest(".dropdown")
.attr("row");
//delete corresponding table row and re-draw the table
dataTable.row(rowNumber).remove();
dataTable.draw();
});
Complete working DEMO of your sample project can be found over here or you can examine that demo in your browser's Dev Tools, using this link.
P.S. if, for some reason, you still decide to proceed with your approach, you may inquiry this post (which is pretty similar to yours) for a way of getting data model properties ('id', in particular) of clicked row
I tried for tow days to add search field and sorting data table using jquery but always i show this error :
Uncaught TypeError: $(...).DataTable is not a function
I changed the script source order but can't run
PS : I'm using thymeleaf, bootstrap
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:replace="fragments/header :: header" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
</head>
<body>
<div th:replace="fragments/menu :: menu"></div>
<div class="row">
<div class="col-md-4">
<h1>Listado de Provinces</h1>
</div>
<div class="col-md-8">
<a href="/createprovince" class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Crear Province</strong></span>
</a>
Home
</div>
</div>
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Opciones</th>
</tr>
</thead>
<tbody>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}"></td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
<div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>
This a screen shoot
This error comes because of this code snippet did not take the insecure link so you put https:// for loading data tables. check it with other editor with http:// that woks for me.
the body of the first column have no values. data tables shows this type if errors and alert because missed values.
some times the
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<link th:replace="fragments/header :: header" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/b-1.5.1/b-flash-1.5.1/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers"
});
});
</script>
</head>
<body>
<div th:replace="fragments/menu :: menu"></div>
<div class="row">
<div class="col-md-4">
<h1>Listado de Provinces</h1>
</div>
<div class="col-md-8">
<a href="/createprovince" class="btn btn-primary a-btn-slide-text">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span><strong>Crear Province</strong></span>
</a>
Home
</div>
</div>
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre</th>
<th scope="col">Opciones</th>
</tr>
</thead>
<tbody>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}">1</td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a><br/>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
<tr th:each="province : ${provinces}">
<td th:text="${province.name}">2</td>
<td class="options">
<a th:href="#{'/provinces/edit/' + ${province.id_province}}" class="btn btn-primary a-btn-slide-text">
<span><strong>Modificar</strong></span>
</a><br/>
<a th:href="#{'/provinces/delete/' + ${province.id_province}}" class="btn btn-delete a-btn-slide-text" onclick="return confirm('¿Estas seguro?');">
<span><strong>Borrar</strong></span>
</a>
</td>
</tr>
</tbody>
</table>
<div th:replace="fragments/footerscripts :: footer"></div>
</body>
</html>
Thank you for your answer, i resolved the problem. The source of the problem was a conflict with anathor jquery local file
I am trying to make UL.pagination to be in the center of the view-area of the parent, without using float as it will interrupt my style.
Would this possible?
I am not familiar with SO yet, but my point is to trigger scrollLeft of .pagination parent to keep pagination in the center of its parent.
This is my try on jsFiddle
/* my goal is to make pagination in the center of the view-area */
$.fn.StickyX = function() {
// alert(this.parentNode.clientWidth);
// alert($(this).parent().innerWidth());
return this.css({
'margin-left': ($(this).parent().innerWidth() / 2) - ($(this).width() / 2) + 'px',
'position': 'inline'
});
};
$('.pagination').StickyX();
#dataTable .pagination {
margin: 0;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="wrapper">
<div id="header">
Header
</div>
<div class="row">
<div class="col-xs-9 contents">
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped table-condensed" id="dataTable">
<thead class="text-primary">
<tr>
<th role="group" aria-label="">
<button type="button" class="btn btn-default btn-add"><i class="glyphicon glyphicon-plus"></i>
</button>
<button type="button" class="btn btn-default btn-refresh"><i class="glyphicon glyphicon-refresh"></i>
</button>
</th>
<th>id</th>
<th>User name</th>
<th>password</th>
<th>Full name</th>
<th>Email</th>
<th>URL</th>
<th>Join date</th>
<th>activation_key</th>
<th>lastupdate</th>
<th>status</th>
<th>groupID</th>
<th>title</th>
</tr>
</thead>
<tbody>
<tr id="row-1">
<td class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-warning btn-edit"><i class="glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-danger btn-delete"><i class="glyphicon glyphicon-trash"></i>
</button>
</td>
<td>1</td>
<td>admin.admin</td>
<td>**********</td>
<td> </td>
<td> </td>
<td> </td>
<td>2015-12-07 02:37:47</td>
<td> </td>
<td>2015-12-06 18:37:47</td>
<td>isActive</td>
<td>isSuperAdmin</td>
<td>Super Admin</td>
</tr>
<tr id="row-2">
<td class="btn-group" role="group" aria-label="">
<button type="button" class="btn btn-warning btn-edit"><i class="glyphicon glyphicon-pencil"></i>
</button>
<button type="button" class="btn btn-danger btn-delete"><i class="glyphicon glyphicon-trash"></i>
</button>
</td>
<td>2</td>
<td>demo.demo</td>
<td>***********</td>
<td> </td>
<td> </td>
<td> </td>
<td>0000-00-00 00:00:00</td>
<td> </td>
<td>2016-01-05 12:45:32</td>
<td>isActive</td>
<td>isSuperAdmin</td>
<td>demo</td>
</tr>
<tr>
<td class="page-control" colspan="13">
<ul class="pagination">
<li class="disabled">
<a href="#Prv" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active">1<span class="sr-only">(current)</span>
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>
<a href="#Nxt" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</div>
</div>
<div class="col-xs-3">
[Menu]
</div>
</div>
<div>
Footer
</div>
</div>
I made some modification js which some how solve the issue, but still need some more help.
jsfiddle
(function($) { // forked from http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible
$.fn.hasScrollBar = function() {
var e = this.get(0);
return {
vertical: e.scrollHeight > e.clientHeight,
horizontal: e.scrollWidth > e.clientWidth
};
}
})(jQuery);
$.fn.StickyX = function() {
var parentWithScroll = $(this).parents().filter(function() {return $(this).hasScrollBar().horizontal;}).first();
if(parentWithScroll) {
var e = $(this);
parentWithScroll.scroll(function() {
e.css('margin-left', ($(this).width() / 2) - (e.width() / 2) + $(this).scrollLeft() + 'px');
})
return this.css('margin-left', (parentWithScroll.width() / 2) - ($(this).width() / 2) + parentWithScroll.scrollLeft() + 'px');
} else {
return this.css('margin-left', 'auto;');
}
};
$('.pagination').StickyX();
to achieve this you only need css and html.
Try this:
td.page-control { text-align:center; }
ul.pagination { margin:0 auto; }
Adapt the code to make sure it's not overridden by your existing styles.
And disable the javascript that is adding the margin to the ul
https://jsfiddle.net/ksqzpfm9/1/
You can use the same method to horizontally center other elements