I have a PHP program with a datatable (Server Side !!):
Each row has a button (“Manage”) which, when clicked, opens up a Bootstrap 4 modal:
I need to populate the modal's 2 elements with the data in the row containing the button which was clicked.
Any hint would be greatly appreciated.
HTML :
<body>
<div id="manageModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="manageAccountModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content border border-dark">
<form id="manageModalForm" name="manageModalForm" action="" method="POST" role="form" class="p-2 needs-validation" novalidate>
<div class="modal-body">
<div>
Id<a id="accUserId" name="accUserId" class="form-control"></a>
<br>
</div>
<div class="form-group">
User Name<input id="accUserName" name="accUserName" type="text" class="form-control">
</div>
</div>
<div id="manageModalActions" class="modal-footer myLightPurpleBgColor rounded">
<div class="col-8">
<div class="row">
<div class="col-4">
<button type="button" class="btn btn-secondary text-light border border-dark myBigBtn font-weight-bold" data-dismiss="modal"><h7>Cancel</h7></button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="jumbotron jumbotron-fluid mr-n2 ml-n2 mb-n2 rounded bg-secondary">
<div class="container">
<div class="row">
<div class="col-lg-12 col-lg-offset-2 myMargTop20 bg-white rounded">
<table id="example" class="display table table-bordered table-hover dt-responsive nowrap rounded" cellspacing="0" width="100%">
<br>
<thead>
<tr>
<th>Manage</th>
<th>Id</th>
<th>User Name</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
Javascript :
<script>
$(document).ready(function() {
$('#example').dataTable({
'scrollX': true,
'pagingType': 'numbers',
'processing': true,
'serverSide': true,
'ajax': 'datatablesServerSide.php',
"columnDefs": [{"render": createManageButtonFunc, "data": null, "targets": [0]}],
});
});
function createManageButtonFunc() {
return '<button id="manageBtn" type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#manageModal">Manage</button>';
}
</script>
datatablesServerSide.php :
<?php
$table = "users";
$primaryKey = "usrId";
$columns = array(
array("db" => "usrId", "dt" => 1),
array("db" => "usrName", "dt" => 2)
);
$sql_details = array(
"user" => "root",
"pass" => "",
"db" => "a_my_project",
"host" => "localhost"
);
require( "ssp_with_UTF8.class.php" );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
SOLVED !
Change my Javascript to the following and it works :
<script>
$(document).ready(function() {
// ============== ==============
var jsTable = $('#example').DataTable({ // added: var jsTable =
// $('#example').dataTable({
'scrollX': true,
'pagingType': 'numbers',
'processing': true,
'serverSide': true,
'ajax': 'datatablesServerSide.php',
"columnDefs": [{"render": createManageButtonFunc, "data": null, "targets": [0]}],
});
// ============== Next 7 lines were added ==============
$('#example').on('click', 'tr', function(){
// var jsData = jsTable.fnGetData(this); <== fnGetData deprecated!!!
jsTable = $('#example').DataTable();
var jsData = jsTable.row(this).data();
$('#accUserId').text(jsData[1]);
$('#accUserName').val(jsData[2]);
})
// =====================================================
});
function createManageButtonFunc() {
return '<button id="manageBtn" type="button" class="btn btn-success btn-xs" data-toggle="modal" data-target="#manageModal">Manage</button>';
}
</script>
Related
Am trying to get data from controller and append to "tbody" using Ajax, yet am getting blank page.
Controller:
public function getRecordsMD(){
$filedata = File::where('uploaded_by', '=', auth()->user()->username)->get();
return response()->json([
'filedata'=>$filedata,
]);
}
Route:
Route::get('/manage_document',[utemfilesharing::class, 'getRecordsMD']);
Ajax/Jquery:
$(document).ready(function () {
getRecordsMD();
//Get all records
function getRecordsMD() {
$.ajax({
type:'GET',
url: '/manage_document',
dataType: "json",
success: function(data){
console.log(data.filedata);
$.each(data.filedata, function (key, item) {
$('tbody').append('<tr>\
<td>'+item.id+'</td>\
<td>'+item.name+'</td>\
<td>'+item.faculity_name+'</td>\
<td>'+item.document_type+'</td>\
<td>'+item.subject_name+'</td>\
<td>'+item.description+'</td>\
<td>\
<button type="button" id="editFiles" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#edit-model" data-id="'+item.id+'"><i class="fas fa-edit"></i></button>\
<button type="button" id="deleteFiles" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#delete-model" data-id="'+item.id+'"><i class="fas fa-trash"></i></button>\
</td>\
</tr>');
});
},
error: function (data) {
console.log('Error:', data);
}
});
}
});
View:
<!-- Manage Document -->
<div class="col-xl-12 col-md-6 mb-4">
<div class="card shadow mb-4">
<!-- Card Header - Dropdown -->
<div
class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Manage Document</h6>
</div>
<!-- Card Body -->
<div class="card-body">
<div class="alert alert-success" role="alert" id="successMsg" style="display: none" >
File Updated successfully!
</div>
<div class="alert alert-danger" role="alert" id="successDMsg" style="display: none" >
File Delete successfully!
</div>
<table id="manageDocument" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>File Name</th>
<th>Faculity Name</th>
<th>Document Type</th>
<th>Subject Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script src="{{asset('vendor\bootstrap\js\bootstrap5-1-3.bundle.min.js')}}"></script>
<script src="{{asset('vendor\jquery\jquery.min.js')}}"></script>
<script src="{{asset('js\Models.js')}}"></script>
It seems like am missing something I don't know what its. whenever I navigate to /manage_document I get a blank page where it suppose display the table. will be glad if you help.
Ok, so I have Index Page where it's is listed all ticket and I have column User.
I add <a> tag in this column
{
"data": "applicationUser.name",
"width": "10%",
"targets": [1],
"render": function (data) {
return '<a class="text-info" href="' + data + '" target_blank>' + data + '</a>'
}
},
And also I create function to popup Modal
$(".table-info").click(function () {
var id = $(this).attr("userDetails");
$.get("/Manager/Ticket/UserDetails?id=" + id, function (result) {
$("#container").append(result);
$("#userDetails").modal({ show: true })
})
})
And here is Modal Popup which I create PartialView.cshtml
#model VmSTicketing.Models.ViewModels.TicketVM
<div class="modal fade" id="userDetails">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h3 class="modal-title">Podaci o Useru</h3>
</div>
<div class="modal-body">
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Ime i Prezime</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" asp-for="Ticket.ApplicationUser.Name" disabled id="ImePrezime" name="ImePrezime">
</div>
</div>
<br>
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Email Adresa</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" asp-for="Ticket.ApplicationUser.Email" disabled id="Email" name="Email">
</div>
</div>
<br>
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Broj Telefona</label>
</div>
<div class="col-md-8">
<input type="text" asp-for="Ticket.ApplicationUser.PhoneNumber" class="form-control" disabled id="BrTel" name="BrTel">
</div>
</div>
<br />
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Klijent</label>
</div>
<div class="col-md-8">
<input type="text" asp-for="Ticket.ApplicationUser.Client" class="form-control" disabled id="klijent" name="klijent">
</div>
</div>
</div>
</div>
</div>
</div>
Here is IndexPage for my table structure:
#model IEnumerable<VmSTicketing.Models.Ticket>
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/AdminLTE/_Layout.cshtml";
}
<br />
<div class="row">
<div class="col-6">
<h2 class="text-primary">Lista tiketa</h2>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary" asp-action="Upsert"><i class="fas fa-plus"></i> Novi tiket</a>
</div>
</div>
<br />
<div class="p-4 border rounded">
<table id="tblData" class="table table-striped table-bordered" style="width:100%">
<thead class="thead-dark">
<tr class="table-info">
<th>Opis</th>
<th>Datum i vrijeme slanja</th>
<th>Vrsta Tiketa</th>
<th>Status</th>
<th>Datum i vrijeme zavrsetka</th>
<th>Korisnik</th>
<th></th>
</tr>
</thead>
</table>
</div>
<partial name="UserDetails" />
#section Scripts{
<script src="~/js/ticket.js"></script>
}
So far this modal work but when I click in table header not in User link.
I try to figure out what I make wrong but unfortunately I can not see where the error is.
So I want to add this function for popup to be load when User click on <a> tag
And here is my code ticket.js where I call my datatable
function loadDataTable() {
dataTable = $('#tblData').DataTable({
"ajax": {
"url": "/Manager/Ticket/GetAll"
},
"columns": [
{ "data": "description", "width": "10%" },
{ "data": "dateAndTime", "width": "15%" },
{ "data": "ticketType.name", "width": "10%" },
{ "data": "status", "width": "10%" },
{ "data": "answered", "width": "15%" },
{
"data": "applicationUser.name",
"width": "10%",
"targets": [1],
"render": function (data) {
return '<a class="text-info" href="' + data + '" target_blank>' + data + '</a>'
}
},
{
"data": "id",
"render": function (data) {
return `
<div class="text-center">
<a href="/Manager/Discussion/OpenDiscussion/${data}" class="btn btn-primary text-white" style="cursor:pointer">
<i class="fas fa-comments"></i>
</a>
<a href="/Manager/Ticket/Details/${data}" class="btn btn-success text-white" style="cursor:pointer">
<i class="fas fa-info"></i>
</a>
<a onclick=Delete("/Manager/Ticket/Delete/${data}") class="btn btn-danger text-white" style="cursor:pointer">
<i class="fas fa-trash-alt"></i>
</a>
</div>
`;
}, "width": "15%"
}
]
});
}
I am not sure how to assign this function to be load on tag ??
Any suggestion ??
You actually need to adjust your render function applicationUser.username property in datatable js.
You can add a class for user-details :
"data": "applicationUser.name",
"render": function (data) {
return '<a id="' + data + '" class="text-info user-details" href="' + data + '" target_blank>' + data + '</a>'
}
and your event listener should go like following so that it should only be triggered when a data row is clicked but no the table header row :
$(".table-info").click("click" , "a.user-details",function () {
var id = this.id;
$.get("/Manager/Ticket/UserDetails?id=" + id, function (result) {
$("#container").append(result);
$("#userDetails").modal({ show: true })
});
});
Currently your event triggers on the class table-info which is also applied on the <tr> for the <th> which is ending up not the behavior which is needed.
I've created a table where my data can be ACTIVE or INACTIVE and this is already working, my goal is I just want to add a function that when I clicked the button to make my data INACTIVE, it will pop up a modal and has a message. But I don't know how will I make it pop up.
I've found a similar post but it cannot be applied to mine, because what I did has a different approach and I think mine is easier for myself to understand and will or might complicate things for me if I try to use the link. Thanks in advance
Here is my code in my JQUERY
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
var id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0';
}
$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {
selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass(
"btn-danger"),
selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass(
"btn-success"),
selector.text("Active"));
// location.reload();
}
});
});
// For status Active/Inactive
function StatusChange() {
$("#dataTables").DataTable().destroy();
$("#tb_body").empty();
var status = $('#stats').val();
if (status) {
$.ajax({
type: "POST",
url: "../forms/form_statusForspecs_dtbl.php",
data: {
status: status
},
success: function(data) {
$("#dataTables").append(data);
$("#dataTables").DataTable();
}
});
}
}
// Startup
$(document).ready(function() {
$('#stats').change(function() {
$(this).val();
});
$("#stats").trigger('change');
});
#import https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
.statusButton {
color: white;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 20px;
white-space: nowrap;
padding: 2px 12px;
font-size: 12px;
line-height: 1.42857143;
border-radius: 4px;
user-select: none;
}
</style>
</head>
<!-- this is the modal that I want to pop up -->
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</h4>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="submit" id="submitBtn" class="btn btn-danger pull-right" data-toggle="modal" data-target="#maModal" onclick="window.location.href='#'">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<br>
<br>
<a href="../forms/form_toolspec.php">
<button class="btn btn-primary pull-right">
<span class="fa fa-plus-circle"></span>
Add Record
</button>
</a>
</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<br>
<!-- Status -->
<div>
<form action="GET">
<div class="form-group">
<label> Table group by Status </label>
<select name="selector_id" onchange="StatusChange()" style="width:200px;" class="show-menu-arrow form-control" id="stats">
<!-- <option value="" disabled> Select Status </option> -->
<option value="1" selected> ACTIVE </option>
<option value="0"> INACTIVE </option>
</select>
</div>
</form>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body" id="showStatus">
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody id="tb_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my form_statusForspecs_dtbl.php AJAX call in function StatusChange()
<?php
include ("../include/connect.php");
$status = $_POST['status'];
$con->next_result();
$result = mysqli_query($con, "CALL GetToolSpecByStatus('$status')");
while ($row = mysqli_fetch_assoc($result))
{
echo '<tr>';
echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>";
echo '<td>'.$row['model_num'].'</td>';
echo '<td>'.$row['model_num_val'].'</td>';
echo '<td>'.$row['no_of_days'] .'</td>'; ?>
<td>
<center>
<p data-id="<?php echo $row['ID'];?>"
class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>">
<?php echo ($row['status'])? 'Active' : 'Inactive'?>
</p>
</center>
</td>
<?php
echo '</tr>';
}
?>
Here is my form_btnStats.php AJAX call for button to change status and will be recorded in sql database
<?php
include('../include/connect.php');
$user_id=$_POST['id'];
$newStatus=$_POST['status'];
$query = "UPDATE tools_spec SET status='$newStatus' WHERE ID = '$user_id'";
$result = mysqli_query($con, $query);
if($result === TRUE)
{
echo json_encode(1);
}
else
{
echo json_encode(0);
}
?>
As you only need to show popup when making button inactive you add code to show modal inside if(status == '1'){ and use $("#reason_for_modal").modal('show'); to show same . Also , put some condition around your ajax call so that it will execute only when status is 1 .Nextly ,if user click on deactivate button inside modal you can create one click event handler for same and pass value to ajax from there.
Demo Code :
var id;
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0'; //change to 0
$("#reason_for_modal").modal('show'); //show modal
}
//enter only when status is 1
if (status == '1') {
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {*/
selector.removeClass("btn-danger").addClass(
"btn-success");
selector.text("Active");
/*}
});*/
}
});
//if activate btn is click
$("#submitBtn").on("click", function() {
var reason = $("#reason").val(); //get reason..
$("#reason_for_modal").modal('hide'); //hide modal
console.log(id)
$("#reason").val("")//empty textarea
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: 0,
reason:reason
},
success: function(data) {*/
//change class and text
$("p[data-id=" + id + "]").removeClass("btn-success").addClass("btn-danger")
$("p[data-id=" + id + "]").text("Inactive")
/*}
});*/
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- this is the modal that I want to pop up -->
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body" id="showStatus">
<div class="table-responsive">
<table width="50%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody id="tb_body">
<tr>
<td>abc</td>
<td>14</td>
<td>1</td>
<td>5</td>
<td>
<center>
<p data-id="1" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
<tr>
<td>abc1</td>
<td>14</td>
<td>11</td>
<td>51</td>
<td>
<center>
<p data-id="2" class="status_checks statusButton btn-danger">
Inactive
</p>
</center>
</td>
</tr>
<tr>
<td>ab3</td>
<td>13</td>
<td>13</td>
<td>51</td>
<td>
<center>
<p data-id="3" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
<textarea id="reason"></textarea>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="button" id="submitBtn" class="btn btn-success pull-right"> De-Activate</button>
<button type="button" class="btn btn-danger pull-right" data-toggle="modal" data-dismiss="modal">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Option 1: Simple CSS class assignment
Example: https://www.w3schools.com/w3css/w3css_modal.asp
Option 2: Use jQuery.show() / jQuery.hide()
function StatusChange() {
...
if (status == 0) {
// This should use # / id
jQuery('div.modal').show();
}
}
Option 3: Use jQuery UI dialog
Example: https://jqueryui.com/dialog/
I had an initial issue where I could not get a button within a modal to work.
I got my solution; however, it ended up breaking the main screen table's button events. I figured separating the scripts into different files and including the file to use specific js files on certain cshmtl pages would solve my problem; however, it's causing me more grief. I had all of these scripts in one file, if there is a solution where all my buttons work inside and outside the modal, I will be happy to take that route.
I think I have it just about figured out -- but now when I click the "add user" button once it's fine. If i click it twice, two modals pop up. If I click it 3 times it freaks out. I am unsure what to do about the problem. I am not the most proficient in js/jQuery, very new and learning.
Main Page:
<link rel="stylesheet" href="~/css/Maintenance.css" />
<link rel="stylesheet" href="~/css/Index.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="~/js/Maintenance.js"></script>
<div class="tableContainer">
<div class="maintHeader">
<div class="headerText">
All Users
#*This button is the one causing issues -----------------------------------*#
<button class="sqButton btnGreen float-right" title="Register"
data-toggle="ajax-modal"
data-target="#register"
data-url="#Url.Action("Register", "Home")">
<i class="glyphicon glyphicon-plus"></i>
</button>
#*-------------------------------------------------------------------------*#
</div>
</div>
#if (Model.Any())
{
//--Table Header Declaration--
<div class="wrapper">
<div class="scrollTable">
<table class="table table-hover table-md ">
<thead>
<tr>
<th class="text-left tableHead d-none">Id</th>
<th class="text-left tableHead">User Name</th>
<th class="text-left tableHead">Email</th>
<th class="text-left tableHead">Phone Number</th>
<th class="text-left tableHead">City</th>
<th class="text-left tableHead text-right">Remove</th>
</tr>
</thead>
#*--Table Body For Each to pull DB records--*#
<tbody>
#foreach (var user in Model)
{
#Html.Partial("~/Views/Administration/Users/UserTable.cshtml", user)
}
</tbody>
</table>
</div>
</div>
}
<div id="modal-placeholder"></div>
</div>
Modal HTML:
<link rel="stylesheet" href="~/css/Modals.css" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
<script type="text/javascript" src="~/js/MaintModals.js"></script>
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modalPosition" role="document">
<div class="modal-content">
<div class="modal-header headerFormat">
<span class="modal-title TitleFont">Login</span>
<button type="button" class="close closePadding" data-dismiss="modal" aria-label="Close">
<span class="xColor" aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" class="mt-3" asp-controller="Account" asp-action="Login">
<div class="form-group row text-center">
<label class="col-sm-3 text-right col-form-label labelFont" asp-for="Email"></label>
<div class="col-sm-7">
<input asp-for="Email" class="formField" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
</div>
<div class="form-group row text-center">
<label class="col-sm-3 text-right col-form-label labelFont" asp-for="Password"></label>
<div class="col-sm-7">
<input asp-for="Password" class="formField" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group row text-center">
<label asp-for="RememberMe" class="col-sm-4 text-right col-form-label labelFont" />
<div class="col-sm-12">
<input asp-for="RememberMe" />
#Html.DisplayNameFor(m => m.RememberMe)
</div>
</div>
<div asp-validation-summary="All" class="text-danger"></div>
<button type="submit" class="btn btn-primary padFloat green">Login</button>
<button type="button" class="btn btn-secondary padFloat blue" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
Maintenance.js:
$(function () {
var placeholderElement = $('#modal-placeholder');
$('[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});
});
MaintModal.js:
$(function () {
$(document).on('click', '[data-dismiss="modal"]', function () {
$(".modal-backdrop").remove();
});
});
$(function () {
var placeholderElement = $('#modal-placeholder');
$(document).on('click', '[data-toggle="ajax-modal"]', function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});
});
site.js:
$('.sqButton').click( function (event) {
event.stopPropagation();
});
I just want my parent table's buttons to work and the buttons within the modal to work. I attempted to unbind ($('[data-toggle="ajax-modal"]').unbind("click");) the event before each event but that fixed nothing.
I am sure there's a simple way to do it. I have just been dancing around it and making it more complicated than it should be.
How do I customize the css of datatables?
My pagination seems broken when I am trying to use datatables function in Modal bootstrap.
Also, how can I limit the pagination number that appear in html when there are so many data ?
For example, in the pagination table it have number
1, 2, 3, 4, 5,...,8
how can I make the pagination into
1, 2 , 3 ,..., 8 ?
The pagination and the row count are just like in a image below.
My datatables script
$('#example').DataTable( {
"ajax": "<?php echo base_url('dashboard/show_karyawan'); ?>",
"columns": [
{
"data": "id",
render: function (data, type, row, meta) {
return meta.row + meta.settings._iDisplayStart + 1;
}
},
{ "data": "NIP" },
{ "data": "nama" },
]
} );
My Modal
<div class="modal fade" id="modalkaryawan" role="dialog" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-lg" style="width: 500px;">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<center><h4>Silahkan Pilih Karyawan</i></h4></center>
</div>
</div>
<div class="modal-body">
<table id="example" class="table table-striped display" cellspacing="0" width="100%">
<thead>
<tr>
<td>No</td>
<td>NIP</td>
<td>Nama Pegawai</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td>No</td>
<td>NIP</td>
<td>Nama Pegawai</td>
</tr>
</tfoot>
</table>
</div>
<div class="modal-footer">
<center>
<button type="button" id="savesebab_delete" class="btn btn-primary">Ya</button>
<button type="button" data-dismiss="modal" class="btn btn-danger">Tidak</button>
</center>
</div>
</div>
</div>
For limiting the pagination number add the following code before you initialize the datatable inside the script:
$.fn.DataTable.ext.pager.numbers_length = 5;
This will make sure that you will have 5 page numbers includeing '...'.
I have made a sample demo here: https://codepen.io/Sahero/pen/VzzpvE.