I know that every time I call "this" inside the function it will select whatever selector have given it in arguments but how could use template literal like this and get the index of the row generated in the append method ?
$(document).on('click', '.add-row', function () {
$(this).closest("table").find("tbody").append(`
<tr>
<td> ${ $(this).closest("tr").index() } </td>
</tr>
`)
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-bordered">
<thead>
<th>INDEX</th>
<th>SOMETHING</th>
<th><button class="btn btn-primary add-row">ADD ROW</button></th>
</thead>
<tbody></tbody>
</table>
</body>
</html>
You'll need to find the tbody, and see the number of children of that element to get a counter:
$(document).on('click', '.add-row', function () {
var $tbody = $(this).closest("table").find("tbody");
$tbody.append(`
<tr>
<td> ${ $tbody.children().length } </td>
</tr>
`)
});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-bordered">
<thead>
<th>INDEX</th>
<th>SOMETHING</th>
<th><button class="btn btn-primary add-row">ADD ROW</button></th>
</thead>
<tbody></tbody>
</table>
</body>
</html>
Related
I am struggling to show footable pagination and still can't figure it out even though I checked documentation and all other examples. In the following code, two tables are tried in different ways and both don't show pagination. Does anyone could explain and point out what is needed to show pagination in this code ? Thanks.
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.paging.css">
</head>
<body>
<table class="table footable table-striped" data-paging="true">
<thead>
<tr>
<th data-breakpoints = "xs">Col 1</th>
<th data-breakpoints = "xs">Col 2</th>
<th data-breakpoints = "xs">Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<table id="tblTesting" class="testingTable table table-striped" data-paging="true" data-page-navigation=".pagination" >
</table>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.paging.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
$('.footable').footable();
$('#tblTesting').footable({
paging:{"enabled": true},
columns:[
{"name":"id","title":"ID","breakpoints":"xs sm","type":"number","style":{"width":80,"maxWidth":80}},
{"name":"firstName","title":"First Name"},
{"name":"lastName","title":"Last Name"},
{"name":"something","title":"Never seen but always around","visible":false,"filterable":false},
{"name":"jobTitle","title":"Job Title","breakpoints":"xs sm","style":{"maxWidth":200,"overflow":"hidden","textOverflow":"ellipsis","wordBreak":"keep-all","whiteSpace":"nowrap"}},
{"name":"started","title":"Started On","type":"date","breakpoints":"xs sm md","formatString":"MMM YYYY"},
{"name":"dob","title":"Date of Birth","type":"date","breakpoints":"xs sm md","formatString":"DD MMM YYYY"},
{"name":"status","title":"Status"}
],
"rows":[
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"},
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"},
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"}
]
});
});
</script>
It's just because the data is small, try populating with over 10 or smth like that. Most pagination plugins use 10 for default.
I am trying to use Datatables with the responsive plugin. The Datatables table works correctly until I add the responsive option. The Table immediately drops the last column and when shrinking the screen the table does not collapse properly.
I removed all my local resources and loaded from CDN and problem still exists. No errors in console. I have played around with table format and just cant get to work correctly. What is weird is my code works correctly in a Jsfiddle but when loaded using Codepen I get same problem as on my local server.
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Datatables Bootstrao -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<!-- Datatables Responsive -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap4.min.css">
<div class="container">
<div class="row">
<div class="col-12">
<table id="users" class="table table-striped table-sm">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Groups</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Admin</td>
<td>istrator</td>
<td>admin#admin.com</td>
<td>
admin<br />
members<br />
</td>
<td>Inactive</td>
<td>Edit | Delete</td>
</tr>
<tr>
<td>Test</td>
<td>User</td>
<td>test#admin.com</td>
<td>
admin<br />
members<br />
</td>
<td>Inactive</td>
<td>Edit | Delete</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Datatables -->
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>
<!-- Responsive -->
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.min.js"></script>
<!-- Datatables Call function -->
<script type="text/javascript">
$(document).ready( function () {
$('#users').DataTable({
responsive: true,
});
});
</script>
Here is a codepen of the result.
https://codepen.io/xxnumbxx/pen/vYBGdmO
Solved. The table requires: style="width:100%" attribute with bootstrap 4.
How do I create a datatables-table? I have a table, but datatables is not working (search table, pagination, dropdown and sort by).
I'm using the CDN-version of CSS and JavaScript for datatables, but it's still not working.
This is my code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- DATATABLE -->
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container fluid">
<div class="row">
<div class="offset-2 col-sm-8 mt-2">
<table class="table table-hover table-striped table-bordered dataTable" id="isi">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">ID</th>
<th scope="col">Lokasi</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- START SCRIPT -->
<script type="text/JavaScript">
$(document).ready(function() {
$(#isi).dataTable();
});
</script>
<!-- Optional JavaScript -->
<!-- DATATABLE -->
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I think the problem is my CDN is not working, like link rel stylesheet or script.
jQuery needs to be loaded before Bootstrap and dataTables files as they are dependent upon$.
So,
Move jQuery, popper and bootstrap.js files above the datatables' files
Add your js code like $(document).ready() below this.
Add quotes around the jquery selector: $("#isi")
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- DATATABLE -->
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container fluid">
<div class="row">
<div class="offset-2 col-sm-8 mt-2">
<table class="table table-hover table-striped table-bordered dataTable" id="isi">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">ID</th>
<th scope="col">Lokasi</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.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>
<!-- DATATABLE -->
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
$("#isi").dataTable();
});
</script>
</body>
</html>
I have a table that has a bunch of rows that I need to be both editable and deletable. I've made a <div> which contains a couple of buttons that I want to show up in the relevant position when the rows are hovered. This is all fine. I also want the buttons to disappear when the mouse leaves the table itself. OK, I'll use the mouseleave event, I thought. Unfortunately this is fired when the mouse enters the buttons <div> too, leading to a feedback loop where the buttons constantly show and hide.
This is quite difficult to describe, but hopefully this is illustrative: https://jsfiddle.net/8d726rqt/
I did try to find an answer already, and there are many where the shown and hidden items are children of the parent element, but that's not the case for me, so these solutions don't work. Furthermore, it's often suggested to use pointer-events: none. This does work, but then the buttons don't receive click events, defeating the point.
#edit-control is not inside #top-level-table. Therefore when #edit-control appears and mouse is over it, it triggers the mouseleave event. Then button disappears and mouse enter table again. Thus button appears again. And it becomes a loop, where button keeps showing hiding.
I suggest adding mouseleave event to the wrapper div of #edit-control and #top-level-table.
$(function()
{
$('.list-row').mouseover(function()
{
var offset = $(this).offset();
$('#edit-controls').css({
'top': offset.top + 10,
'left': offset.left + 10
}).fadeIn();
//console.log('fadein');
});
//change to this element with mouseleave event
$('#table-wrapper').mouseleave(function()
{
// console.log('fadeout');
$('#edit-controls').fadeOut();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive" id="table-wrapper">
<table id="top-level-table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Table</th>
</tr>
</thead>
<tbody>
<tr class="list-row">
<td>Content<br><br>Things</td>
</tr>
<tr class="list-row">
<td>Content<br><br>Things</td>
</tr>
<tr class="list-row">
<td>Content<br><br>Things</td>
</tr>
<tr class="list-row">
<td>Content<br><br>Things</td>
</tr>
</tbody>
</table>
<div id="edit-controls" style="display:none; position:absolute; z-index:1" >
<button type="button" class="btn btn-primary">Edit</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</body>
</html>
If buttons block placed some other place, than table you might use this solution:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="top-level-table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Table</th>
</tr>
</thead>
<tbody>
<tr class="list-row">
<td>Content<br><br>Things</td>
</tr>
<tr class="list-row">
<td>Content<br><br>Things</td>
</tr>
<tr class="list-row">
<td>Content<br><br>Things</td>
</tr>
<tr class="list-row">
<td>Content<br><br>Things</td>
</tr>
</tbody>
</table>
<div id="edit-controls" style="display:none; position:absolute; z-index:1">
<button id="edit" type="button" class="btn btn-primary">Edit</button>
<button id="delete" type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</body>
$(function()
{
$('.list-row').mouseover(function()
{
var offset = $(this).offset();
$('#edit-controls').css({
'top': offset.top + 10,
'left': offset.left + 10
}).fadeIn();
console.log('fadein');
});
$('#top-level-table').mouseleave(function(event)
{
if (event.relatedTarget.id !== 'edit' &&
event.relatedTarget.id !== 'delete' &&
event.relatedTarget.id !== 'edit-controlls') {
$('#edit-controls').fadeOut();
}
});
});
here is jsfiddle: https://jsfiddle.net/kinos/pbg8dhvr/13/
On the div property:
<div onMouseLeave={(e) => e.preventDefault()}>
....
</div>
How can print the value of variable count in ministries().For example i have 54 object.so it will show ministries(54).How can i print 54(value of count) in ministries.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Data Retrieve</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
#p1 {background-color: violet;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<table id="info_table" class="table">
<tr>
<td><p align="center"><b>Ministry</b></p></td>
</tr>
<tr id="p1">
<td><p align="center"><b>Total ministries()</b></p></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script>
$.getJSON("http://localhost/directory/ministri.json",function(obj){
var info ='';
//alert(obj.data.length);
var count = obj.data.length;
$.each(obj.data,function(key,value){
info += '<tr>';
info +='<td>'+value.sitename_bn+'<span style="float: right"> > </span>'+ '</td>';
info += '</tr>';
});
$('#info_table').append(info);
});
</script>
It's really simple. Just target your element #p1 and replace its HTML with the value you got.
$('#p1 td').html("<p><b>Total ministries(" + count + ")</b></p>");
Change your table structure to
<table id="info_table" class="table">
<thead>
<tr>
<td><p align="center"><b>Ministry</b></p></td>
</tr>
<tr id="p1">
<td><p align="center"><b>Total ministries()</b></p></td>
</tr>
</thead>
<tbody>
</tbody>
</table>
and then change jQuery code to
$('#info_table > tbody').append(info);