Develop Reference

Add markers radius with pulse animation on click

I trying to add markers to the mapbox-gl-js. Every marker needs to have its own icon.
The code:
// General params
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [28.834527783897784, 45.340983787852906],
zoom: 16,
pitch: 60,
bearing: 7,
antialias: true
});
// Language
mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js');
map.addControl(new MapboxLanguage({
defaultLanguage: 'ru'
}));
// On load
map.on('load', () => {
// Insert the layer beneath any symbol layer.
const layers = map.getStyle().layers;
const labelLayerId = layers.find(
(layer) => layer.type === 'symbol' && layer.layout['text-field']
).id;
// Places JSON
const geojson = {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'iconSize': [40, 40],
'icon': 'house',
'url': '1',
'description':
`
<div class="text ff--open-sans">
<h5 class="mb-1 fw--700">Продажа квартиры</h5>
<img src="/design/map_1/images/flat.jpg" class="img--responsive border-radius">
<p class="mb-2 mt-1">
Продается с мебелью и техникой,заходи и живи.
</p>
<span class="fs--14 color--dark">Характеристики</span>
<div class="d-flex color--gray gutter-y-5 fs--13 flex-column">
<div class="d-flex mb-0">
<span>Агенство</span>
<span class="mx-2">—</span>
<span class="color--dark">Капитал</span>
</div>
<div class="d-flex mb-0">
<span>Комнаты</span>
<span class="mx-2">—</span>
<span class="color--dark"> 2 </span>
</div>
<div class="d-flex mb-0">
<span>Этаж</span>
<span class="mx-2">—</span>
<span class="color--dark"> 3 </span>
</div>
<div class="d-flex mb-0">
<span>Ремонт</span>
<span class="mx-2">—</span>
<span class="color--dark"> Евро </span>
</div>
</div>
</div>
`
},
'geometry': {
'type': 'Point',
'coordinates': [28.83342580788326, 45.3389572391001]
},
},
{
'type': 'Feature',
'properties': {
'icon': 'flat',
'description':
`
<div class="text ff--open-sans">
<h5 class="mb-1 fw--700">Продажа квартиры</h5>
<img src="/design/map_1/images/flat.jpg" class="img--responsive border-radius">
<p class="mb-2 mt-1">
Продается с мебелью и техникой,заходи и живи.
</p>
<span class="fs--14 color--dark">Характеристики</span>
<div class="d-flex color--gray gutter-y-5 fs--13 flex-column">
<div class="d-flex mb-0">
<span>Агенство</span>
<span class="mx-2">—</span>
<span class="color--dark">Капитал</span>
</div>
<div class="d-flex mb-0">
<span>Комнаты</span>
<span class="mx-2">—</span>
<span class="color--dark"> 2 </span>
</div>
<div class="d-flex mb-0">
<span>Этаж</span>
<span class="mx-2">—</span>
<span class="color--dark"> 3 </span>
</div>
<div class="d-flex mb-0">
<span>Ремонт</span>
<span class="mx-2">—</span>
<span class="color--dark"> Евро </span>
</div>
</div>
</div>
`
},
'geometry': {
'type': 'Point',
'coordinates': [28.820403408543825, 45.35615240244837]
}
},
]
};
// Add places on map
map.addSource('places', {
'type': 'geojson',
'data': geojson
});
// Add 3D 'building' layer
map.addLayer(
{
'id': 'add-3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
// Use an 'interpolate' expression to
// add a smooth transition effect to
// the buildings as the user zooms in.
'fill-extrusion-height': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'height']
],
'fill-extrusion-base': [
'interpolate',
['linear'],
['zoom'],
15,
0,
15.05,
['get', 'min_height']
],
'fill-extrusion-opacity': 0.6
}
},
labelLayerId
);
// Set building number labels color
map.setPaintProperty('building-number-label', 'text-color', 'black');
// Set building number labels size
map.setLayoutProperty('building-number-label', 'text-size', 16);
// Custom html for places on the map.
for (const marker of geojson.features) {
// Create a DOM element for each marker.
const el = document.createElement('div');
const ico = marker.properties.icon;
// console.log(marker.geometry.coordinates)
// var circle = mapboxgl.circleMarker(marker.geometry.coordinates, {radius: 100}).addTo(map);
el.className = `map-marker marker-icon-${ico}`;
el.style.width = `30px`;
el.style.height = `30px`;
// Add markers to the map.
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.addTo(map);
// Custom html marker
$(el).each(function(){
$(this).html('<div class="js-show-property marker-content" data-url="'+marker.properties.url+'"><div class="pin bounce"><div class="icon"></div></div><div class="pulse"></div></div>');
});
// Add active marker
el.addEventListener('click', () =>{
$(el).toggleClass("active");
});
}
});
But it`s all on CSS. And when I zoom map the circle of the marker doesn't have a true size. I try to make it on Mapbox js options.
The problem is to add to each marker radius circle by click with pulsing animation and icon inside the marker.
Help, please!

I advise you to use layers to create your markers. Here is an example of a Marker using this principle with a pulsation effect.
https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/
You can add a layer for the pulse and another one at the same place for the icon. You won't have to worry about the size of your markers.
// ...
map.addLayer({
'id': 'layer-with-pulsing-dot',
'type': 'symbol',
'source': 'dot-point',
'layout': {
'icon-image': 'pulsing-dot',
'icon-allow-overlap': true // important for display
}
});
map.addLayer({
'id': 'myicon2',
'type': 'symbol',
'source': 'dot-point',
'layout': {
'icon-image': 'bicycle-15',
'icon-allow-overlap': true // important for display
}
});
//...
Example updated
I have improved the example to meet the demand more precisely. I added a second point for a really useful example.
See the code : https://codepen.io/cladjidane/pen/GRErYqO

daterangepicker not folding open with bootstrap in Laravel 7

I've been working on a reporting engine, have all the graphs working using Ajax and jquery to update the page. I wanted to add a date range picker and went to Date Range Picker Examples
I am able to get it so it has the icon and the dates populate when the page loads. But when I click on the field it doesn't open to giving the option to select. I took the sample code and was able to get it to work with only it on the page. In the console, I don't see any errors. I'm just getting into jquery etc so I'm perplexed at why this isn't working.
HTML Content
<div class="row justify-content-center">
<div class="col-auto">
<h1>Report for {{ $labels['Company'] }}</h1>
</div>
</div>
<div class="col-4 float-right">
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>
<span></span> <i class="fa fa-caret-down"></i>
</div>
</div>
<div class=" justify-content-around bg-white">
<div class="d-flex justify-content-around bg-white">
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="impressions"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Impressions</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body ">
<div class="test rounded-circle font-weight-bolder col-xs" id="clicks"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Clicks</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cpm"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">eCPM</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cost"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Cost</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cpc"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">CPC</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="ctr"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">CTR</h6>
</div>
</div>
</div>
</div>
<div class="card-body">
<canvas id="myAreaChart" width="100%" height="30"></canvas>
</div>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
</div>
</div>
</div>
</div>
Script section
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" ></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script type="text/javascript">
$(function () {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$(".rangeArea").load("reportRange", function() {
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
})
cb(start, end);
});
( function ( $ ) {
var charts = {
init: function () {
// -- Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
this.ajaxGetPostMonthlyData();
},
ajaxGetPostMonthlyData: function () {
var urlPath = 'http://' + window.location.hostname + ':8000/admin/comp/get-post-chart-data/'+{{$labels['orgid']}};
var request = $.ajax( {
method: 'GET',
url: urlPath
} );
request.done( function ( response ) {
$("#ctr").html(response.totals.ctr);
$("#cpc").html(response.totals.cpc);
$("#cost").html(response.totals.cost);
$("#cpm").html(response.totals.cpm);
$("#clicks").html(response.totals.clicks);
$("#impressions").html(response.totals.impressions);
charts.createCompletedJobsChart( response );
});
},
/**
* Created the Completed Jobs Chart
*/
createCompletedJobsChart: function ( response ) {
console.log(response);
var days = new Array();
var clicks = new Array();
var impressions = new Array();
$.each(response.totalByDate, function (index, value){
days.push(value['days']);
clicks.push(value['clicks']);
impressions.push(value['impressions']);
});
var daysFiltered = days.filter(e => e != null);
var clicksFiltered = clicks.filter(e => e != null);
var impressionsFiltered = impressions.filter(e => e != null);
console.log(impressions);
var data = {
labels: daysFiltered,
datasets: [{
fill: false,
type: 'bar',
label: 'Impressions',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: 'impressionID',
data: impressionsFiltered,
borderColor: "#993333",
// borderDash: [5, 5],
backgroundColor: "#993333",
pointBackgroundColor: "#993333",
pointBorderColor: "#993333",
pointHoverBackgroundColor: "#993333",
pointHoverBorderColor: "#993333",
order:2
}, {
fill: false,
type: 'line',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: 'clicksID',
label: 'Clicks',
data: clicksFiltered,
borderColor: "#55bae7",
// borderDash: [5, 5],
backgroundColor: "#55bae7",
pointBackgroundColor: "#55bae7",
pointBorderColor: "#55bae7",
pointHoverBackgroundColor: "#55bae7",
pointHoverBorderColor: "#e755ba",
order: 1
}]
};
var option = {
maintainAspectRatio: true,
responsive: true,
bezierCurveTension: 0,
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 3,
fontSize: 10
}
}],
yAxes: [{
position: 'left',
'id': 'impressionID',
display: true,
ticks: {
steps: 100,
stepValue: 5,
max: 800,
callback: (label, index, labels) => {
return label ;
}
}
}, {
position: 'right',
'id': 'clicksID',
display: true,
ticks: {
steps: 1,
stepValue: 1,
precision: 0,
max: 5,
callback: (label, index, labels) => {
return label ;
}
}
},
]
}
};
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: option
});
}
};
charts.init();
} )( jQuery );
</script>

Determining which chart the user has clicked on

I'm using chart.js to draw multiple line charts. And when the user clicks on one of these charts, I need to know which chart it was. In order to catch the click of the user, I've added events: ['click'] in the options of the chart, as well as a onClick: clicked to call the function clicked when the user has clicked on the chart. Now I have this:
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [
{
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b'
}
]
}
if (chLine) {
new Chart(chLine,{
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5
}
},
events: ['click'],
onClick: clicked
}
}
);
}
function clicked(c, i) {
console.log(c, i)
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="test.js"></script>
</body>
</html>
And every time I click on a chart, it gives an array containing information about each chart and also an object containing information about the click event. But I can't seem to find information to conclude which chart was clicked. How can I do this?

Inside the clicked function you can use getElementAtEvent(c) & _datasetIndex; to get the index of the chart data.After that use that index to get the data which is used to draw that line chart. In this example another field is added to the data and on click that name field is consoled. In this case you need to click on the chart circle
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [{
name: 'First Chart',
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
name: 'Second Chart',
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b',
id: '1',
}
]
}
if (chLine) {
var myLineChart = new Chart(chLine, {
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5
}
},
events: ['click'],
onClick: clicked
}
});
}
function clicked(c, i, x) {
let getDataSetIndex = this.getElementAtEvent(c)[0]._datasetIndex;
console.log(chartData.datasets[getDataSetIndex].name)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>

Recharge by clicking on tabs

I need to reload the contents of the tab by clicking on the link, because I'm trying rendering problems on the Google Chart.
I made a JsFiddle that represents the problem. Notice the rendering difference of the two tabs.
I put a delay, but when I access another tab. Incorrect rendering still happens.
setTimeout(function () {
chart.draw(data, options);
}, 2000);

need to wait until the chart's container is visible, before drawing for the first time
see following working snippet...
$(document).foundation();
$('#sac-tabs').on('change.zf.tabs', function() {
switch ($(this).children('.is-active').text().trim()) {
case 'Tab 1':
drawVisualization();
break;
case 'Tab 2':
drawVisualization2();
break;
}
});
google.charts.load('current', {
callback: drawVisualization,
packages: ['corechart']
});
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Departamento', 'Concluídas', 'Andamento', 'Pendentes'],
['Vendas', 5, 6, 2],
['Peças', 3, 4, 6],
['Serviços', 1, 2, 3],
['Administrativo', 7, 5, 3]
]);
var options = {
title: 'Gráfico',
hAxis: {title: 'Departamento'},
seriesType: 'bars',
colors: ['#21BA45', '#F90', '#DC3912'],
series: {5: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function drawVisualization2() {
var data = google.visualization.arrayToDataTable([
['Departamento', 'Concluídas', 'Andamento', 'Pendentes'],
['Vendas', 5, 6, 2],
['Peças', 3, 4, 6],
['Serviços', 1, 2, 3],
['Administrativo', 7, 5, 3]
]);
var options = {
title: 'Gráfico',
hAxis: {title: 'Departamento'},
seriesType: 'bars',
colors: ['#21BA45', '#F90', '#DC3912'],
series: {5: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));
chart.draw(data, options);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css">
<div class="row">
<div class="medium-12 columns">
<ul class="tabs" data-tabs id="sac-tabs">
<li class="tabs-title is-active">
Tab 1</li>
<li class="tabs-title">Tab 2</li>
</ul>
<div class="tabs-content" data-tabs-content="sac-tabs">
<div class="tabs-panel is-active" id="panel1">
<div class="row">
<div class="medium-12 columns">
<p>
Expected outcome
</p>
<div id="chart_div"></div>
</div>
</div>
</div>
<div class="tabs-panel" id="panel2">
<div class="row">
<div class="medium-12 columns">
<p>
Not a Problem
</p>
<div id="chart_div2"></div>
</div>
</div>
</div>
</div>
</div>
</div>

I got your problem,
Only active tab draw full width, draft.
For solution you want to make one think, when you draw second tab draft, that time active second tab using jQuery after that run "chart. draws" commnad.
I hope you understand. Enjoy :)

Bootstrap Data Table Overlap

I have this 2 data tables below as you can see one of them is overlapping the data table and the other one is need to edit the width. I try to add width but don't have any effect on my first data table. Any suggestion about this two problems?.
HTML
<div class="row">
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-lg-6">
<i class="fa fa-list fa-fw"></i>Borrower Name
</div>
</div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<div class="col-lg-6">
<table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 100%;" id="dtBorrowerName">
</table>
</div>
</div>
</div>
</div>
</div>
#*</div>
<div class="row">*#
<div class="col-lg-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-lg-6">
<i class="fa fa-list fa-fw"></i>Book
</div>
</div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="dataTable_wrapper">
<div class="col-lg-6">
<table class="table table-striped table-bordered table-hover table-responsive nowrap"
role="grid" style="width: 10%;" id="dtBook">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
JS CODE
var dtBorrowerName = $('#dtBorrowerName').DataTable({
responsive: true,
processing: true,
info: true,
search: true,
stateSave: true,
order: [[1, "desc"]],
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
ajax: { "url": "/LS/GetBorrower" },
columns:
[
{ data: "BorrowerID", title: "", visible: false, searchable: false },
{ data: "IDNo", title: "ID Number" },
{ data: "Name", title: "Complete Name", sClass: "alignRight", width: " 100px" },
{ data: "BookTransactionHdrID", title: "BookTransactionHdrID", visible: false, searchable: false }
]
});
function GetStudentBook(getId) {
if (getId != 0 || getId != undefined || getId != "") {
dtStudBook = $('#dtBook').DataTable({
responsive: true,
processing: true,
info: true,
retrieve: true,
destroy: true,
search: true,
stateSave: true,
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "All"]],
ajax: {
"url": "/LS/GetStudentBook",
"data": function (d) {
d.BookTransactionDtlID = getId;
}
},
columns:
[
{ data: "BookId", title: "", visible: false, searchable: false },
//{ data: "Barcode", title: "Barcode", searchable: false },
{ data: "Author", title: "Author" }
// { data: "Title", title: "Title", sClass: "alignRight" },
// { data: "DatePublish", title: "Date Publish", sClass: "alignRight" },
// { data: "PlacePublish", title: "Place Publish" },
// { data: "NameOfPublisher", title: "Name Of Publisher"},
// { data: "ISBN", title: "ISBN"},
// { data: "BookTransactionDtlID", title: "", visible: false }
]
});
}
else {
//do nothing..
}
}

I hit this problem. It is caused by the length of the table headers and the padding around them. (I am assuming that it looks OK if the panel is wide?).
The solution is to write complicated JS to split words like "Publisher" or (as I did in the end) use Bootstrap visibility to show normal words on larger screens and use abbreviations on smaller screens (I found I had to write extra media queries to clean this up).
You may need a tooltip or whatever to explain your abbreviations. You are rather trying to fit a quart into a pint pot (that is a lot of headings for a small panel if you want them orderable etc) I think it will take quite a bit of hand crafting with very specific media queries.
Hope that helps.