Hi, I would like to add an additional row at the end of the table to serve as a summary row for all the columns, however when I add it the length menu and pagination from the datatable disappeared. Any idea why it was like that ? I had been stuck at this for quite some time, I would be grateful for an idea or a suggestion on the issue, thanks.
Before adding extra row in table as summary:
https://i.stack.imgur.com/g4bzk.png[
^]
After adding extra row in table (length menu and pagination went missing:
https://i.stack.imgur.com/2g1K5.png[
^]
my code for the page:
<?php
require_once 'core/init.php';
$user = new User();
if (!$user->isLoggedIn()) {
Redirect::to("login.php");
} else {
$resultresult = $user->data();
$userlevel = $resultresult->role;
if ($resultresult->verified == false || $resultresult->superadmin == true) {
$user->logout();
Redirect::to("login.php?error=error");
}
}
$payroll_history = new payroll_history();
$payroll_history_id = escape(Input::get('payroll_history_id'));
$payroll_historyresultOnly = $payroll_history->searchOnlypayroll_history($payroll_history_id);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/table.css">
<title>Payslip Summary - DoerHRM</title>
<?php
include 'includes/header.php';
?>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.11.3/r-2.2.9/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.11.3/r-2.2.9/datatables.min.js"></script>
<style>
#btn-download {
margin: 15px 15px 20px 0px;
float: right;
}
#btn-commit {
margin: 15px 0px 20px 15px;
/* float: left;*/
}
#btn-uncommit {
margin: 15px 0px 20px 15px;
}
#btn-dropdown {
margin: 15px 15px 20px 0px;
float: right;
}
#btn-notification {
margin: 15px 0px 20px 15px;
}
/*
.dropdown {
margin: 0px 10px 0px 0px;
}
.commit{
margin: 20px 0px 0px 10px;
}
*/
.page-item:first-child .page-link {
pointer-events: none;
cursor: default;
color: grey;
}
#SummaryTable_length {
justify-content: flex-start;
float: left;
flex: 0 0 65% !important;
margin-bottom: -1 !important;
width: 50%;
}
#SummaryTable_length:focus {
color: #007BFF !important;
}
#SummaryTable_length select {
padding: 1px;
height: 35px;
width: auto;
border: hidden !important;
overflow: hidden !important;
shape-inside: auto !important;
}
#SummaryTable_length select::-moz-focus-inner {
border: none !important;
}
#SummaryTable_length select:focus {
outline: hidden;
}
#SummaryTable_length select option:hover {
background-color: #007BFF;
color: white;
}
/* #SummaryTable_length select:-internal-list-box option:checked:hover{
background-color: #007BFF;
color: white;
}
#SummaryTable_length select:-internal-list-box option:checked {
color: #007BFF !important;
background-color: #007BFF;
} */
#SummaryTable_length select option {
width: 39px;
height: 39px;
font-size: 1.0em;
padding: 7px;
text-align: center;
margin-right: 10px;
float: left;
/* display: inline-block;*/
cursor: pointer;
/*
border: blue solid 1px;
border-radius: 5px;
*/
color: black;
}
.search-div {
width: 30%;
}
.search-align {
justify-content: flex-end;
}
.input-group {
margin: 10px 0px 15px 5px;
width: 25% !important;
}
.form-control {
padding-left: 2.375rem;
}
.form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: none;
color: #aaa;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
justify-content: flex-end;
}
/*
#SummaryTable_paginate {
margin-bottom: 15px;
}
#SummaryTable_filter label {
margin-top: 15px;
}
*/
.bg-light {
background-color: #CED4DA !important;
}
.employeeIcon {
position: relative;
margin: 10px, 0px, 0px, 10px;
/* left: 10px;*/
border: 3px;
float: left;
}
</style>
</head>
<body>
<?php include 'includes/topbar.php'; ?>
<div class="d-flex" id="wrapper">
<?php include 'includes/navbar.php'; ?>
<div id="page-content-wrapper">
<div class="container-fluid" id="content">
<div class="row my-5">
<div class="col-12 col-lg mb-3 mb-lg-0">
<p class="h2"><i class="fa fa-usd"></i> Month End/Second Half @ Oct 2021</p>
</div>
</div>
</div>
<!-- <form id="summaryform"> -->
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist"> <a class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true" style="padding: .5rem 15rem!important;">Summary</a> <a class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false" style="padding: .5rem 15rem!important;">Details</a> </div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<br>
<div class="container-fluid" id="content">
<br>
<div class="row text-light" style="margin: 0 25px">
<div class="col border rounded" style="background-color:#007BFF;">
<div class="employeeIcon"> <img src="http://localhost/Payroll/img/employee.png" style="height:57px; width:52.25px; margin-bottom: 10px; margin-top: 10px;"> </div>
<p style="text-align: center;">NUMBERS OF EMPLOYEES</p>
<p class="h3" style="text-align: center; margin:0 0 5 0;"> 1
<?php /*?>
<?php
$payroll_history_id = escape( Input::get( 'payroll_history_id' ) );
$empobject = new payroll_history();
$empresult = $empobject->searchOnly( $payroll_history_id );
if ( $empresult ) {
echo $empresult->employeecount;
} else {
echo "0";
}
?>
<?php */ ?>
</p>
</div>
<div class="col border rounded mx-3" style="background-color:#007BFF;">
<p style="text-align: center;">TOTAL NET PAY</p>
<p class="h3" style="text-align: center;"> </p>
</div>
<div class="col border rounded" style="background-color:#007BFF;">
<p style="text-align: center;">LEAVE CUT OFF DATE</p>
<p class="h3" style="text-align: center;">
<?php /*?>
<?php
$empobject = new payroll_history();
$payroll_history = escape( Input::get( 'payroll_history_id' ) );
$empresult = $empobject->searchOnly( $payroll_history_id );
if ( $empresult ) {
echo $empresult->leavecutoffdate;
} else {
echo "0";
}
?>
<?php */ ?>
</p>
</div>
</div>
<br>
<div class="row border" style="background-color:#E5E5E5!important; -webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black; margin: 10px 0 0 0; ">
<div class="col bg-light">
<p style="text-align: center; font-weight: bold; font-size: 14px; font-family: Open Sans; padding-top: 10px; ">TOTAL PCB</p>
<p style="text-align: center; font-family: Open Sans; font-size: 14px; padding-top: 25px;">0.00</p>
</div>
<div class="col border-left bg-light" style="">
<p style="text-align: center; font-weight: bold; font-size: 14px; font-family: Open Sans; padding-top: 10px;">TOTAL EPF</p>
<p style="text-align: center; font-family: Open Sans; font-size: 14px; padding-top: 25px;">438.00</p>
</div>
<div class="col border-left bg-light" style="">
<p style="text-align: center; font-weight: bold; font-size: 14px; font-family: Open Sans; padding-top: 10px;">TOTAL SOCSO</p>
<p style="text-align: center; font-family: Open Sans; font-size: 14px; padding-top: 25px;">41.60</p>
</div>
<div class="col border-left bg-light" style="">
<p style="text-align: center; font-weight: bold; font-size: 14px; font-family: Open Sans; padding-top: 10px;">TOTAL EIS</p>
<p style="text-align: center; font-family: Open Sans; font-size: 14px; padding-top: 25px;">7.40</p>
</div>
<div class="col border-left bg-light" style="">
<p style="text-align: center; font-weight: bold; font-size: 14px; font-family: Open Sans; padding-top: 10px;">TOTAL HRDF</p>
<p style="text-align: center; font-family: Open Sans; font-size: 14px; padding-top: 25px;">0.00</p>
</div>
</div>
<br>
<div class="container table-container" style="border:2.5px solid #cecece; padding-bottom: 10px; margin: 0 0 0 0">
<!-- <div class="d-flex justify-content-between">-->
<div class="container">
<button class="btn btn-primary" id="btn-commit" data-toggle="modal" data-target="#commitAll">Commit All</button>
<button class="btn btn-danger" id="btn-uncommit" data-toggle="modal" data-target="#uncommitAll">Uncommit All</button>
<button type="button" class="btn btn-outline-primary" id="btn-notification" data-toggle="modal" data-target="#sendNotification">Send Notification</button>
<button class="btn btn-secondary dropdown-toggle" type="button" id="btn-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Summary Files</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Payslip Report</a> <a class="dropdown-item" href="#">Summary Report</a> </div>
<button type="button" class="btn btn-primary" id="btn-download">Batch Download</button>
</div>
<div class="align-items-center"> </div>
<div class="col-12 search-auto">
<div class="row search-align">
<div class="col-auto search-div input-group"> <span class="fa fa-search form-control-feedback input-group-append"></span>
<input type="text" class="form-control" placeholder="Search" id="searchBox">
</div>
</div>
<div class="content">
<table id="SummaryTable" class="table table-bordered compact" style="width: 100%; margin-bottom: 20px!important;">
<thead>
<th>Employee</th>
<th>Job Title</th>
<th>Department</th>
<th>Salary</th>
<th>Gross Pay</th>
<th>Total Deduction</th>
<th>Net Pay</th>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td></td>
</tr>
<tr>
<th scope="row" colspan="8">Count</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- </form> -->
</div>
</div>
</div>
<!-- Modal CommitAll -->
<div class="modal fade" id="commitAll" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body"> Do you want to commit this payroll?<br>
-This will make payslip available for employees in current processed payroll<br>
-Billing calculation is based on commited employees<br>
-Commiting is free of charge for trial period (Year-Month) and/or during full term promotion periods<br>
</div>
<div class="modal-footer">
<!-- <a href="#commitSuccess" data-toggle="modal" data-dismiss="modal">Next ></a>-->
<!-- <a class="btn btn-primary" href="#commitSuccess" data-toggle="modal" data-dismiss="modal">Yes</a> -->
<a onclick="$('#commitAll').one('hidden.bs.modal', function() { $('#commitSuccess').modal('show'); }).modal('hide');" class="btn btn-primary">Yes</a>
<!-- <button type="button" class="btn btn-primary" id="ModalcommitYes" data-toggle="modal" data-target="#commitSuccess">Yes</button>-->
<button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- Modal UncommitAll -->
<div class="modal fade" id="uncommitAll" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Confirm Uncommit</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
<div class="modal-body"> Are you sure you want to uncommit all? </div>
<div class="modal-footer">
<!-- <a href="#commitSuccess" data-toggle="modal" data-dismiss="modal">Next ></a>-->
<!-- <a class="btn btn-primary" href="#uncommitSuccess" data-toggle="modal" data-dismiss="modal">Yes</a> -->
<a onclick="$('#uncommitAll').one('hidden.bs.modal', function() { $('#uncommitSuccess').modal('show'); }).modal('hide');" class="btn btn-primary">Yes</a>
<!-- <button type="button" class="btn btn-primary" id="ModalcommitYes" data-toggle="modal" data-target="#commitSuccess">Yes</button>-->
<button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<!-- Modal SuccessCommit -->
<div class="modal fade" id="commitSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button>
</div>
-->
<div class="modal-body" style="text-align: center;">
<div class="container" style="margin-bottom: 15px;"> <img src="img/Success.png" /> </div>
Commit all successfully !
</div>
<div class="modal-footer">
<div class="col-md-12 text-center">
<button type="button" class="btn btn-success" id="btn-commitSuccess" data-dismiss="modal">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal SuccessUncommit -->
<div class="modal fade" id="uncommitSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="text-align: center;">
<div class="container" style="margin-bottom: 15px;"> <img src="img/Success.png" /> </div>
Uncommit all successfully !
</div>
<div class="modal-footer">
<div class="col-md-12 text-center">
<button type="button" class="btn btn-success" id="btn-uncommitSuccess" data-dismiss="modal">Continue</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal SuccessSentNotification -->
<div class="modal fade" id="sendNotification" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body" style="text-align: center;">
<div class="container" style="margin-bottom: 15px;"> <img src="img/Success.png" /> </div>
Sent successfully !
</div>
<div class="modal-footer">
<div class="col-md-12 text-center">
<button type="button" class="btn btn-success" id="btn-commitSuccess" data-dismiss="modal">Continue</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var SummaryTable = $('#SummaryTable').DataTable({
responsive: true,
language: {
paginate: {
previous: "Page",
next: ""
},
sLengthMenu: "_MENU_"
},
"dom": '<"top">rt<"bottom"lp><"clear">',
lengthMenu: [
[10, 20, 50],
[10, 20, 50]
],
});
$('#searchBox').on('keyup change clear input search', function() {
var keyword = $('#searchBox').val();
SummaryTable.search(keyword).draw();
});
});
</script>
<script language="javascript">
$('#btn-download').hide();
$('#btn-uncommit').hide();
$('#btn-notification').hide();
$('#btn-commitSuccess').click(function() {
$('#btn-commit').hide();
$('#btn-uncommit').show();
$('#btn-notification').show();
$('#btn-download').show();
// $('.modal').modal('hide');
// return false;
});
$('#btn-uncommitSuccess').click(function() {
$('#btn-commit').show();
$('#btn-uncommit').hide();
$('#btn-notification').hide();
$('#btn-download').hide();
// $('.modal').modal('hide');
// return false;
});
</script>
<script>
$(document).ready(function() {
$("div#SummaryTable_length select").attr('size', 4);
});
</script>
<?php
include 'includes/footer.php';
?>
</body>
</html>
What I have tried:
Google for quite some time, still don't understand where I did wrong
Submit an article or tip