I recently switched my DataTables plugin to use scroll bars instead of pagination. I realized that once I switched it, two strange issues happened. A second row appeared below the column headers with just the sorting arrows and the column headers no longer lined up with the columns. On the first tab its just a little bit off but on subsequent tabs it is really off.
The only way to fix it is by sorting one of the columns after its loaded, where this fixes the issue with the alignment.
I am looking for some assistance in finding where the issue is in my code that is causing this to happen.
Javascript:
<script>
$(document).ready(function()
{
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
$('table.table').DataTable({
responsive: true,
"order": [[ 7, "desc" ]],
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"bInfo" : false
});
$('#dt-players-all2').DataTable().search( '' ).draw();
});
</script>
HTML:
#extends('layouts.default')
#section('content')
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<!-- Panel Header -->
<div class="panel-heading">
Players Overview
</div>
<!-- /Panel Header -->
<!-- Panel Body -->
<div class="panel-body">
<div class="dataTable_wrapper">
<ul class="nav nav-tabs" role="tablist">
<li class="active">All</li>
<li>QB</li>
<li>RB</li>
<li>WR</li>
<li>TE</li>
<li>FLEX</li>
<li>DST</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-all">
<table class="table table-striped table-bordered table-hover" id="dt-players-all">
<thead>
<tr>
<th>Position</th>
<th>Player</th>
<th>Team</th>
<th>Opponent</th>
<th>Game</th>
<th>Opp. Rank</th>
<th>FPPG</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
#foreach ($players as $player)
<tr class="odd gradeX">
<td>{{$player->position}}</td>
<td>{{$player->name}}</td>
<td>{{$player->team}}</td>
<td>{{$player->opponent}}</td>
<td>{{$player->status}}</td>
<td class="center">0</td>
<td class="center">{{$player->fppg}}</td>
<td class="center">${{$player->salary}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<div class="tab-pane" id="tab-qb">
<table class="table table-striped table-bordered table-hover" id="dt-players-all2">
<thead>
<tr>
<th>Position</th>
<th>Player</th>
<th>Team</th>
<th>Opponent</th>
<th>Game</th>
<th>Opp. Rank</th>
<th>FPPG</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
#foreach ($players as $player)
<tr class="odd gradeX">
<td>{{$player->position}}</td>
<td>{{$player->name}}</td>
<td>{{$player->team}}</td>
<td>{{$player->opponent}}</td>
<td>{{$player->status}}</td>
<td class="center">0</td>
<td class="center">{{$player->fppg}}</td>
<td class="center">${{$player->salary}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
<!-- /Panel Body -->
</div>
</div>
<!-- /.panel -->
</div>
</div>
</div>
#stop
SOLUTION
Your code works fine, just make sure you're using the latest DataTables version.
Also if you're using Responsive extension you need to use responsive.recalc() API method to recalculate the widths used by Scroller extension after a change in the display.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
$.each($.fn.dataTable.tables(true), function(){
$(this).DataTable()
.columns.adjust()
.responsive.recalc();
});
});
DEMO
See this jsFiddle for code and demonstration.
LINKS
See jQuery DataTables – Column width issues with Bootstrap tabs for solution to the most common problems with jQuery DataTables and Bootstrap Tabs.
Related
I'm working with PHP (Laravel 5.3) and developing a Blade view with a Bootstrap modal that have a foreach loop inside to show too many rows. This modal is called from a table that, in the end of every row have a button for more details (and this details are an array).
So, how can I pass the array data to the modal?
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Name</th>
<th class="column2">Contact</th>
<th class="column3">Details</th>
</tr>
</thead>
<tbody class="main-rows list" >
#foreach ($listBusiness as $business)
<tr>
<td class="column1">{{$business->name}}</td>
<td class="column2">{{$business->contact}}</td>
<td class="column7">
<a data-toggle="modal" data-target="#modalBusinessDetails">
<i class="la la-search"></i>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<!-- Modal table -->
<div class="modal" id="modalBusinessDetails" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<div class="col-12">
<div class="table-responsive">
<table class="table table-bordered m-table" id="business">
<thead class="columns">
<tr>
<th class="column1">Created at</th>
<th class="column2">Active</th>
<th class="column2">Employees</th>
</tr>
</thead>
<tbody class="main-rows">
#foreach ($ListDetail as $BusinessDetail)
<tr>
<td class="column1">{{$BusinessDetail->created_at}}</td>
<td class="column2">{{$BusinessDetail->active}}</td>
<td class="column3 text-center">{{$BusinessDetail->employees}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="btn group">
<button type="button" data-dismiss="modal">{{Tr('Close')}}</button>
</div>
</div>
</div>
</div>
</div>
Just like #Vidal said, this requires JS (the likes of AJAX, AXIOS, etc)
Here is my sample controller method that you can use for something like that.
function getData(Request $request)
{
$data = DB::table('table_name')->get(); //can be done differently
//create separate view for dynamic data e.g table <tbody>AJAX or AXIOS response</tbody>
$returnHTML = view('view_name',compact('data'))->render();
return response()->json( ['success' => true, 'html' => $returnHTML] );
}
Hope it helps.
Currently i have a datatable like this,
https://prnt.sc/nbfmge
I am opening bootstrap 4 modal when a user click on no of items, it open will
https://prnt.sc/nbfmrj
But i am not getting search and pagination functionality when datatable is in modal. Here's my code
Here's HTML code:
<!-- Modal body -->
<div class="modal-body">
<div class="card">
<div class="card-header">
<h5 class="card-title float-left">List of items</h5>
</div>
<div class="card-body row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered display" id="datatables">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Item Name</th>
<th scope="col">Item Model</th>
<th scope="col">Item Year</th>
<th scope="col">Item Condition</th>
<th scope="col">Item Price</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody id="showEmployeesReportItems">
<!-- List of Items -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
And this is my jquery code:
$('#datatables').DataTable().destroy();
$('#showEmployeesReportItems').html(html);
$('#datatables').DataTable();
How can i get pagination and search feature in modal datatable ?
Got a solution, change id="datatables" bootstrap modal body id to 2, 3 or any number and also change this here $('#datatables2').DataTable(); Now the Jquery datatable will also work fine with bootstrap modal.
<div class="row-fluid padTop5">
<div class="col-12">
<div class="row" *ngIf="showFiles">
<div class="col-12 colBorder">
<table datatable class="table table-striped centerAlign">
<thead>
<tr>
<th class="centerAlign">Select All<input type="checkbox" [(ngModel)]="fileSelectAll" name="fileSelectAll" class="d-block" (change)="selectAll($event,fileSelectAll)"></th>
<th>TestCase Name</th>
<!-- <th>Provision Name</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let file of fileList;let i =index">
<td>
<input type="checkbox" [(ngModel)]="file.selected" [checked]="isSelected" (change)='checkClicked($event,file)' name="cb">
</td>
<td>{{file.name}}</td>
<!-- <td>PE</td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I am using angular datatables ..the table is forming when the user selects the file from local.works fine for the first time..but when the user again selects the file previous records are not gone..how to. Refresh the table
Hi I have a datatable that displays 10 columns but the problem is it dont fit the screen properly. I still need to scroll horizontally and vertically to see the other columns/rows. What I want to do is to make the table smaller. How can I achieve that? Refer to the screenshots here and here . I have tried setting table width = "100%" but unfortunately nothing happens.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<center><h1 class="page-header">TMTRO Iloilo <small>Violators Records</small> </h1></center>
<div class="removeMessages"></div>
<button class="btn btn-default pull pull-right" data-toggle="modal" data-target="#addMember" id="addMemberModalBtn">
<span class="glyphicon glyphicon-plus-sign"></span> Add Member
</button>
<br /> <br /> <br />
<table class="table-striped table-bordered nowrap" width="100%" id="manageMemberTable">
<thead>
<tr>
<th>ID #</th>
<th>Name</th>
<th>Last Name</th>
<th>License Number</th>
<th>Violation</th>
<th>Arrest Place</th>
<th>Address</th>
<th>Plate Number</th>
<th>Contact Number</th>
<th>Officer Name</th>
<th>Date&Time</th>
<th>Paid</th>
<th>Option</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
Per the HTML spec, a <table> and its children are auto-sized. Put simply, other rules are thrown out the window to make the table itself look good, by default.
Bootstrap does have an answer for this, with responsive tables. Just add the table-responsive class to your table element and it'll handle any scrollbars within the table rather than allowing your entire page to scroll.
<table class="table table-responsive">
...
</table>
I have a page coded in Handlebars and I am fetching the data as json from nodejs. I am trying to render a button which is a third party button. When I don't use DataTables() then the buttons are correctly render and clicking them opens a third party login window for further processing.
However, when I enable DataTables, only the first page is correctly rendered and the buttons work, but it does not work for other pages when the number of elements exceed 10. I am not sure if this is an issue with DataTables or how the third party button is expected to behave, but I am suspecting that when I switch pages in DataTables, the parameters the button expects while rendering are not correctly sent. I am new to DataTables.
<body>
<div class="container">
<div class="jumbotron">
<h1>Last 100 NSE Annoucements</h1>
<h3>Top Annoucements by corporates listed on NSE</h3>
</div>
</div>
<div class="container">
<table class="table table-hover table-responsive table-sm" id="resultTable"">
<thead>
<tr>
<th class="col-sm-1" scope="row">Ticker</th>
<th class="col-sm-1" scope="row">Link</th>
<th class="col-sm-2" scope="row">Date</th>
<th class="col-sm-5" scope="row">Description</th>
<th class="col-sm-1" scope="row">Trade</th>
</tr>
</thead>
<tbody>
{{#each feedList}}
<tr>
<td> {{this.ticker}} </td>
<td> {{this.ticker}} </td>
<td> {{moment date=this.dateAdded format="DD-MM-YYYY h:mm:ss a"}} </td>
<td> {{this.purposeText}} </br> {{this.summaryText}} </td>
<td> <span> <kite-button href="#" data-kite="secret_key"
data-exchange="NSE"
data-tradingsymbol="{{this.ticker}}"
data-transaction_type="BUY"
data-quantity="1"
data-order_type="MARKET">Buy {{this.ticker}} stock</kite-button> </span></td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</body>
<script>
$(document).ready(function() {
$('#resultTable').DataTable({
"order": [[ 2, "desc" ]],
"columnDefs" : [{"targets":2, "type":"date"}]
});
});</script>
</html>
How to modify this - most probably custom rendering of the button as each row is displayed?
EDIT
I am trying to modify the DataTable by custom rendering the button each time - but its not working.
<body>
<div class="container">
<div class="jumbotron">
<h1>Last 100 NSE Annoucements</h1>
<h3>Top Annoucements by corporates listed on NSE</h3>
</div>
</div>
<div class="container">
<table class="table table-hover table-responsive table-sm" id="resultTable"">
<thead>
<tr>
<th class="col-sm-1" scope="row">Ticker</th>
<th class="col-sm-1" scope="row">Link</th>
<th class="col-sm-2" scope="row">Date</th>
<th class="col-sm-5" scope="row">Description</th>
<th class="col-sm-1" scope="row">Trade</th>
</tr>
</thead>
<tbody>
{{#each feedList}}
<tr>
<td> {{this.ticker}} </td>
<td> {{this.ticker}} </td>
<td> {{moment date=this.dateAdded format="DD-MM-YYYY h:mm:ss a"}} </td>
<td> {{this.purposeText}} </br> {{this.summaryText}} </td>
<td> {{this.ticker}} </td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</body>
<script>
$(document).ready(function() {
$('#resultTable').DataTable({
"order": [[ 2, "desc" ]],
"columnDefs" : [{"targets":2, "type":"date"},
{
targets: -1,
searchable: false,
orderable: false,
render: function(data, type, full, meta){
if(type === 'display'){
data = '<kite-button href="#" data-kite="scret" data-exchange="NSE" data-tradingsymbol=' + data + 'data-quantity="1" data-order_type="MARKET">Buy '+ data + 'stock</kite-button>';
}
return data;
}
]
});
});</script>
</html>