JQuery Datatable header is not aligned with the tbody? - javascript

I have set of data that should display in JQuery Datatables with options to filter, and scroll without losing column headers. All features work so far but there is problem with the column header. If you click on the link and check run example you will see the problem. The column header is on the left while tbody is centered. I have tried fixing this problem and changing my HTML code, removing some of the JQuery table attributes but still no success. Please if anyone knows how to fix this problem or if there is any problem with my code please elt me know. Here is example:
$('#btnGet').on('click', function() {
buildTable();
});
var dataTable;
function GenerateTable(tblID) {
// Setup - add a text input to each footer cell
$('#rptTbl thead tr').clone(true).appendTo('#rptTbl thead');
$('#rptTbl thead tr:eq(1) th').each(function(i) {
//var title = $(this).text();
$(this).html('<input type="text" placeholder="Search" />');
$('input', this).on('keyup change', function() {
if (dataTable.column(i).search() !== this.value) {
dataTable.column(i).search(this.value).draw();
}
});
});
dataTable = $('#' + tblID).DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print',
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
],
orderCellsTop: true,
fixedHeader: {
header: true,
footer: true
},
scrollX: true,
scrollY: "400px",
scrollCollapse: true,
iDisplayLength: 25,
language: {
"emptyTable": "No records were found."
}
});
}
function buildTable() {
var htmlTbl = '<table id="rptTbl" class="table table-bordered"><thead><tr><th>Area</th></tr></thead><tbody><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr></tbody></table>';
$('#rptData').empty().append(htmlTbl);
GenerateTable('rptTbl');
}
<!DOCTYPE html>
<html>
<head>
<title>Test JQuery Datatables</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- *** Start: CSS for DataTables. *** -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
<!-- *** End: CSS for DataTables. *** -->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- *** Start: JS for DataTables. *** -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<!-- *** End: JS for DataTables. *** -->
</head>
<body>
<div class="container">
<div id="report_filters" class="collapse in">
<div class="row">
<div class="form-group col-xs-10 col-sm-5 col-md-3 col-lg-3">
<button type="button" id="btnGet" class="btn btn-primary btn-block" data-toggle="collapse" data-target="#report_data,#report_filters">Get Report</button>
</div>
</div>
</div>
<div id="report_data" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#report_data,#report_filters">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
</button>
</div>
</div>
<div id="rptData" class="table-responsive"></div>
</div>
</div>
</body>
</html>


Add a drawCallback function in dataTable options
dataTable = $('#' + tblID).DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print',
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
],
orderCellsTop: true,
fixedHeader: {
header: true,
footer: true
},
scrollX: true,
scrollY: "400px",
scrollCollapse: true,
iDisplayLength: 25,
drawCallback: function( settings ) {
// Reset margin to 0 after datatable render
var ele = document.querySelector('.dataTables_scrollBody');
if(ele){
ele = ele.querySelector('.dataTable');
if(ele){
ele.style.margin = 0;
}
}
},
language: {
"emptyTable": "No records were found."
}
});

Related

My bootstrap dropdown is not working and I tried everything to make it work as per my knowledge

For some reason, my dropdown menu is not working. I have already added all bootstrap CDN and files that I've found, also the jquery script is coming first, but nothing happens, I click over and over and the button doesn't work. It's an exceptional case where a table is being handled by Javascript, I don't know if this is the problem and I'm not catching it. Please, I would like to ask for some help here to make my dropdown works, thank you!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TSS BRA Automation For Unbilled</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"> crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="static/styles/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table.min.css"> rel="stylesheet">
<link rel="stylesheet" href="static/css/bootstrap-table.min.css" rel="stylesheet">
<!-- Style CSS -->
<link rel="stylesheet" href="static/styles/css/main-styles.css">
<!-- Style SCSS -->
<link rel="stylesheet" href="static/styles/scss/style.css">
</head>
<body class="main-layout">
<!-- <div class="loader_bg">
<div class="loader"><img src="static/styles/static/images/loading.gif" alt="#" /></div>
</div> -->
<header>
<div class="header_bg">
<div class="header">
<a href="index.html"><img class="logo"
src="https://i.postimg.cc/bwWpnryh/images-removebg-preview.png"
alt="#" />
</a>
</div>
<section class="banner_main">
<div class="container-fluid">
<div class="row d_flex">
<div class="text-bg">
<h1><strong>Welcome to<br/></strong> TSS BRA Automation
for Unbilled</h1>
</div>
</div>
</section>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="center">
<i class="fa-solid fa-upload"></i>
<strong>Upload your files</strong>
</div>
</div>
<div class="cardBody card-block">
<div id="message" class="d-none">
<div class="alert alert-success
alert-dismissible">
<a href="#" class="close"
data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Files uploaded.
</div>
</div>
<form method="POST" action="/"
enctype="multipart/form-data"
class="form-horizontal" id="form">
<div class="row form-group">
<div class="col-12 col-md-12">
<div class="control-group" id="fields">
<label class="control-label"
for="formFile">
Chis Ativo
</label>
<label class="control-label2"
for="formFile2">
Gis Mensal
</label>
<div class="controls">
<div class="entry_1 upload-input">
<input class="form-control "
name="file_1" type="file"
id="activeChisForm"
accept="xlsx" required>
</div>
<div class="entry_2 upload-input">
<input class="form-control"
name="file_2" type="file"
id="gisForm" accept="xlsx"
required>
</div>
</div>
<button class="submitButton"
type="submit" value="Submit"
id="bsubmit" style="--content:
'Upload';">
<div class="left"></div>
Upload
<div class="right"></div>
</button>
<a target="_blank" href="#"><svg
style="width:2em;height:2em;position:fixed;top:1em;left:1em;opacity:.8;"
viewBox="0 0 24 24"></svg></a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="cardBody card-block">
<div class="select">
<select class="form-control" id="locale">
<option value="en-US">English</option>
<option value="es-ES">Español</option>
<option value="pt-BR" selected>Português</option>
</select>
</div>
<div id="toolbar">
<button id="remove" class="btn btn-danger"
disabled>
Delete
</button>
</div>
<table
id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-fullscreen="true"
data-height="100"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-detail-view="true"
data-show-export="true"
data-click-to-select="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, all]"
data-show-footer="true"
data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
data-side-pagination="server"
data-response-handler="responseHandler">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<a target=”_blank”
href="https://w3.ibm.com/w3publisher/amq2c-kaizen"><img
class="citech"
src="https://i.postimg.cc/y8qRPTs7/citechlogo.png">
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- <script src="static/styles/js/jquery-3.5.1.js"></script> -->
<script src="static/styles/js/jquery-3.6.2.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table-locale-all.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table-locale-all.min.js'"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script type="text/javascript" src="static/styles/js/script.js"></script>
<script type="text/javascript" src="static/styles/js/custom.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap-table.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap-table.min.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap.bundle.js"></script>
</body>
</html>
Javascript
var $table = $('#table')
var $remove = $('#remove')
var selections = []
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
})
}
function responseHandler(res) {
$.each(res.rows, function (i, row) {
row.state = $.inArray(row.id, selections) !== -1
})
return res
}
function detailFormatter(index, row) {
var html = []
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>')
})
return html.join('')
}
function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="fa fa-heart"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="fa fa-trash"></i>',
'</a>'
].join('')
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row))
},
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
})
}
}
function totalTextFormatter(data) {
return 'Total'
}
function totalNameFormatter(data) {
return data.length
}
function totalPriceFormatter(data) {
var field = this.field
return '$' + data.map(function (row) {
return +row[field].substring(1)
}).reduce(function (sum, i) {
return sum + i
}, 0)
}
function initTable() {
$table.bootstrapTable('destroy').bootstrapTable({
height: 550,
locale: $('#locale').val(),
columns: [
[{
field: 'state',
checkbox: true,
rowspan: 2,
align: 'center',
valign: 'middle'
}, {
title: 'Item ID',
field: 'id',
rowspan: 2,
align: 'center',
valign: 'middle',
sortable: true,
footerFormatter: totalTextFormatter
}, {
title: 'Item Detail',
colspan: 3,
align: 'center'
}],
[{
field: 'name',
title: 'Item Name',
sortable: true,
footerFormatter: totalNameFormatter,
align: 'center'
}, {
field: 'price',
title: 'Item Price',
sortable: true,
align: 'center',
footerFormatter: totalPriceFormatter
}, {
field: 'operate',
title: 'Item Operate',
align: 'center',
clickToSelect: false,
events: window.operateEvents,
formatter: operateFormatter
}]
]
})
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table',
function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
selections = getIdSelections()
})
$table.on('all.bs.table', function (e, name, args) {
console.log(name, args)
})
$remove.onClick(function () {
var ids = getIdSelections()
$table.bootstrapTable('remove', {
field: 'id',
values: ids
})
$remove.prop('disabled', true)
})
}
$(function () {
initTable()
$('#locale').onChange(initTable)
})

Use this CDN for Datatable it will work perfect
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css

Uncaught TypeError: $(...).iconpicker is not a function

i need a icon picker for my wordpress theme. i find it in github and tried add to my project but it gives error.
errors in console
function portfolio_admin_services_form_meta_box_handler($item)
{
?>
<tbody >
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<!-- Load the Icon Picker's Stylesheet -->
<link href="<?php echo plugin_dir_path( __DIR__ ); ?>includes/css/bootstrapicons-iconpicker.css" rel="stylesheet">
<!-- jQuery Is Required -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Load the Latest Bootstrap 5 Framework -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Load the Icon Picker's JavaScript -->
<script src="<?php echo plugin_dir_path( __DIR__ ); ?>js/bootstrapicon-iconpicker.js"></script>
<div class="text-center mt-5">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">Icon Picker Example</span>
<!-- Create An Input Field For The Icon Picker -->
<input type="text" class="form-control iconpicker" placeholder="Icon Picker" aria-label="Icone Picker"
aria-describedby="basic-addon1">
</div>
</div>
<style>
body { background: #fafafa; }
.container { margin: 150px auto; max-width: 640px; }
</style>
<script>
// initialize the icon picker and done
$('.iconpicker').iconpicker({
// customize the icon picker with the following options
// THANKS FOR WATCHING!
title: 'My Icon Picker',
selected: false,
defaultValue: false,
placement: "bottom",
collision: "none",
animation: true,
hideOnSelect: true,
showFooter: true,
searchInFooter: false,
mustAccept: false,
selectedCustomClass: "bg-primary",
fullClassFormatter: function (e) {
return e;
},
input: "input,.iconpicker-input",
inputSearch: false,
container: false,
component: ".input-group-addon,.iconpicker-component",
templates: {
popover: '<div class="iconpicker-popover popover" role="tooltip"><div class="arrow"></div>' + '<div class="popover-title"></div><div class="popover-content"></div></div>',
footer: '<div class="popover-footer"></div>',
buttons: '<button class="iconpicker-btn iconpicker-btn-cancel btn btn-default btn-sm">Cancel</button>' + ' <button class="iconpicker-btn iconpicker-btn-accept btn btn-primary btn-sm">Accept</button>',
search: '<input type="search" class="form-control iconpicker-search" placeholder="Type to filter" />',
iconpicker: '<div class="iconpicker"><div class="iconpicker-items"></div></div>',
iconpickerItem: '<a role="button" href="javascript:;" class="iconpicker-item"><i></i></a>'
}
});
</script>
iconpicker that i added to my project : https://github.com/itsjavi/fontawesome-iconpicker
i tried to add an icon picker to my wordpress theme page. but it didnt work.

How to add button to a JavaScript based Table with Data from PHP Database?

I want to add a "Start Chat" button for every individual user in the last column to this JavaScript based table with data fetched from PHP database. I don't wish to use <TR><TD> table model cause its not attractive as this one. Also this one has a filter, sorting and search option included in the table. Which makes easier usability with more functions.Have Attached photos for the same...
the one with heading "User List" is the output of code written below.
<?php
session_start();
include("include/connection.php");
if(isset($_SESSION['Username1']))
{
//print_r($_SESSION['Username']);
}
else{
header("location:AdminSignIn.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type href="Images/favicon.ico">
<title>Admin Panel</title>
<noscript><meta http-equiv="refresh" content="0; url=JSDisabled.html" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/Admin.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/Admin.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<style>
</style>
</head>
<body>
<div class="navigation"> The Admin Panel </div>
<div class="split Sidebar" id="SB" style="color:#000000;">
<div class="sidebar_text" id="Connect">Connect</div>
</div>
<!--- Start Of Admin Connection --->
<div class="split Connect_Content" id="Connect_Cnt">
<link type="text/css" href="css/bootstrap-table.css" rel="stylesheet">
<div class="container" style="width:100%;height:95%;margin:1%;">
<div class="col-md-12">
<div class="panel panel-success" style="background-color:#ffffff;color:#000000;font-size:20px;">
<div class="panel-heading" style="background-color:#000000;color:#ffffff;font-family:Monotype Corsiva; font-size:30px; font-weight:bold;">
User List
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table style="text-align:center;" id="table"
data-show-columns="true"
data-auto-refresh="true"
>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap-table.js"></script>
<script type="text/javascript">
var $table = $('#table');
$table.bootstrapTable({
url: 'include/UserConnectList.php',
search: true,
pagination: true,
buttonsClass: 'primary',
showFooter: true,
minimumCountColumns: 3,
columns: [{
field: 'TbID',
title: 'ID',
sortable: true,
},
{
field: 'TbUsername',
title: 'Username',
sortable: true,
},
{
field: 'TbAge',
title: 'Age',
sortable: true,
},
{
field: 'TbGender',
title: 'Gender',
sortable: true,
},
{
field: 'TbCountry',
title: 'Country',
sortable: true,
},
{
field: 'TbOnline',
title: 'Status',
sortable: true,
},
{
field: 'TbLogin',
title: 'Last Login Time',
sortable: true,
},
{
field: 'TbAccess',
title: 'Access',
sortable: true,
},
{
field: '<button type="submit" class="btn btn-info btn-xl start_chat"></button>',
title: 'Start Chat',
sortable: false,
},
],
});
$(function() {
var auto_refresh = setInterval(function () {
var t = Date.now();
$('#show').load('UserConnectList.php' + t);
}, 5);
});
</script>
</div>
<!--- End Of Admin Connection --->
</body>
</html>
<?php
/* UserConnectList.php*/
require 'connection.php';
$sqltran = mysqli_query($connection, "SELECT * FROM users ")or die(mysqli_error($connection));
$arrVal = array();
$i=1;
while ($rowList = mysqli_fetch_array($sqltran)) {
$name = array(
'TbID' => $i,
'TbUsername' => $rowList['Username'],
'TbGender' => $rowList['Gender'],
'TbAge' => $rowList['Age'],
'TbCountry' => $rowList['Country'],
'TbOnline' => $rowList['Online'],
'TbLogin' => $rowList['LoginDate'],
'TbAccess' => $rowList['Status'],
);
array_push($arrVal, $name);
$i++;
}
echo json_encode($arrVal);
mysqli_close($connection);
?>

Use render to generate the HTML. Notice that I used backticks on that line so that I could insert the ID variable into data-id
{
field: 'TbID',
title: '',
render: value => `<button class="btn btn-info btn-xl start_chat" data-id="${value}">Start Chat</button>`
}
Then create a listener for your buttons
$table.on('click', '.start_chat', function() {
const userId = this.getAttribute('data-id');
// function code here
}

fullcalendar modal not displayed

I'm trying to setup html modal for fullcalendar in Djnago according to this and this solution, but modal is not displayed [no popup window].
I try to find solutions according to link, but with no results.
Thank You for any solutions.
package imports:
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<link href='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/timegrid#4.3.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/interaction#4.3.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/timegrid#4.3.0/main.min.js'></script>
script:
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'pl',
selectable: true,
plugins: ['interaction', 'dayGrid'],
firstDay : 1,
header: {
left: 'today',
center: 'title',
right: 'prev, next',
},
events: [
{% for event in events %}
{
id: '{{event.id}}',
title: '{{event.title}}',
description: '{{event.description}}',
start: '{{event.start_date|date:"Y-m-d"}}',
end: '{{event.end_date|date:"Y-m-d"}}',
color: {% if event.done %}'YellowGreen '{%else%}'SkyBlue '{%endif%},
allDay: false,
},
{% endfor %}
],
eventClick: function(event) {
$('#fullCalModal').modal();
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
},
});
calendar.render();
});
</script>
html:
<body>
<div id='calendar'></div>
</body>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
</div>
</div>
</div>

I've updated bootstrap and added bootstrap.css into HTML.
One file code:
<head>
<script src="https://unpkg.com/jquery#3.4.1/dist/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<link href='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/timegrid#4.3.0/main.min.css' rel='stylesheet' />
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/interaction#4.3.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/timegrid#4.3.0/main.min.js'></script>
</head>
<body>
<div id='calendar'></div>
</body>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
</div>
</div>
Test
</div>
<script>
function loadCalendar() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'pl',
selectable: true,
plugins: ['interaction', 'dayGrid'],
firstDay : 1,
header: {
left: 'today',
center: 'title',
right: 'prev, next',
},
events: [
{
title: 'All Day Event',
description: 'www',
start: '2019-09-03'
},
],
eventClick: function(event) {
console.log('modal', event);
$('#fullCalModal').modal();
$('#modalTitle').html(event.event.title);
$('#modalBody').html(event.event.extendedProps.description);
},
});
calendar.render();
};
if (document.readyState !== 'complete') {
document.addEventListener('DOMContentLoaded', loadCalendar);
} else {
loadCalendar();
}
</script>
Working example online: https://jsfiddle.net/m2xwphLj/

Bootstrap Pagination not working with displayed content

Want to make dynamic bootstrap pagination with displaying different content on clicking Paginations.

Try this, I hope this will work for you
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="//raw.github.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="main" style="text-align:center;">
<h2 style="text-align:center;">Pagination with Div Structur</h2>
<div class='blk content4'>
<!--// show here ur div structure-->
Pagination content here.
</div>
<div class="pagi"></div>
</div>
<script type="text/javascript">
$('.pagi').bootpag({
total: 27,
page: 1,
maxVisible: 5,
leaps: true,
firstLastUse: true,
first: '<span aria-hidden="true">←</span>',
last: '<span aria-hidden="true">→</span>',
wrapClass: 'pagination',
activeClass: 'active',
disabledClass: 'disabled',
nextClass: 'next',
prevClass: 'prev',
lastClass: 'last',
firstClass: 'first'
}).on("page", function (event, num) {
$(".content4").html("Page " + num); // or some ajax content loading...
}).find('.pagination');
</script>
</div>
</body>
</html>

Categories

Resources