I have started to implement Datatables in a project.
My Project is based on Bootstrap 3.
I have build up a package with the necessary files on the datatables download-page and created a simple datatable based on the docs. Everything works fine, but I have a problem with responsiveness. Have a look at the following screenshot:
As you see. the search-bar has problems.
The table has the following HTML:
<table width="100%" class="table table-striped table-bordered dt-responsive table-condensed table-hover" id="event_history" cellspacing="0"> .......
The table has the following JS:
var table = $('#event_history').DataTable({
responsive: true,
colReorder: true,
lengthChange: true,
"order": [[ 0, "desc" ]],
});
Perhaps somebody can help me to solve this.
Thank you!
Controls in DataTables with Bootstrap styling wrap nicely when table occupies full page width, see this example.
However I think you're showing your table in a panel that doesn't occupy full page width, which prevents col- rules from being applied, as shown in this example. You can use special crafted value for dom option to configure column layout for one specific table based on your expected container sizes.
For example:
var table = $('#example').DataTable({
responsive: true,
dom:
"<'row text-center'<'col-xs-12'l><'col-xs-12'f>>" +
"<'row'<'col-xs-12'tr>>" +
"<'row text-center'<'col-xs-12'i><'col-xs-12'p>>"
});
See this example for code and demonstration.
Related
I'm learning Dojo Toolkit and I'm fighting with adding dijit into dijit. There was simmilar post about it but wih DIV's. I just simply want to programmatically insert a button or anything else to a ContentPane like this:
I have a script (with required items to insert button):
require(["dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dojo/domReady!", "dijit/form/Button", "dijit/_WidgetBase"],
function(AccordionContainer, ContentPane, Button){
var aContainer = new AccordionContainer({style:"height: 300px"}, "markup");
var aChild1 = new ContentPane({
title: "Date selectors",
content: "Test"
});
var aChild2 = new ContentPane({
title:"Group 2",
content:"Test"
});
var aChild3 = new ContentPane({
title:"Group 3",
content:"Test"
});
aContainer.addChild(aChild1);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);
aContainer.startup();
});
And my DIV is simply:
<div id="markup" style="width: 250px; height: 300px">
This ContentPane should work as left toolbar with rollable panes. In first one I'd like to add date pickers or button or anything else. Above code works until I try to add subChild. I tried to create var with button and make it child of a content pane like:
var btn as new Button([...]);
and place it here:
aContainer.addChild(aChild1);
aChild1.addChild(btn);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);
aContainer.startup();
but it not works. How can I build my layout in this case? Thanks in advance for help.
Problem solved. I applied declarative instead of programatic creation:
In script, I simply added this line:
require(["dojo/parser", "dijit/layout/ContentPane"]);
Then I wrote some divs like:
<div data-dojo-type="dijit/layout/ContentPane">
Some text
</div>
I found a tip (inside the code of demos) that:
content pane has no children so just use dojo's builtin after advice
dojo.connect(dijit.layout.ContentPane.prototype, "resize",
function(mb)
... so all I had to do was:
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='selected:true, title:"Calendar"'>
<!-- calendar widget pane -->
<input id="calendar1" data-dojo-type="dijit.Calendar">
</div>
If you would like to see, how to place any of layout items in one place, see Dojo Theme Tester (view source):
https://download.dojotoolkit.org/release-1.7.0/dojo-release-1.7.0/dijit/themes/themeTester.html?theme=tundra
You will find every fragment well described. For me, it is more useful than documentation.
I hope that by solving my problem, this solution will be helpful to someone.
Stack: Bootstrap 5, JQuery, Datatables
The issue: I have a page that uses Bootstrap navtabs. In one tab is a chart, and in another tab is a table created using Datatables. When the table tab has focus, the table styling is fine, even when the data changes. However, whenever another tab has focus and the data changes, the columns in the table cease to be aligned correctly. I think part of the issue is that some of the column titles are dynamic, with dynamic content demarcated by spans.
The data is controlled by a series of select menus, so whenever one of the select menus changes a series of processes is triggered, which includes updated the dynamic content and also refreshing the datatable.
I am not applying any custom classes or additional styling to the table. It looks like the issue is the datatable object trying to calculate col widths properly
Here's an example of the column headers not aligning properly:
Has anyone encountered this before, or have any ideas for how to fix this problem?
HTML:
<!-- Container for dynamic datatables -->
<div class="col-sm-12">
<div class="table-responsive">
<table id="datatable" class="table table-striped table-hover table-bordered table-sm" aria-label="Graduation Rates by Year" style="width:100%">
<thead>
<th>Cohort Year</th>
<th>Ethnicity</th>
<th>Pell Status</th>
<th>1st Gen. Status</th>
<th>Gender</th>
<th>Student Sub-Group: Count Enrolled</th>
<th>Student Sub-Group: Count Graduating within <span class="outcomeYear">6</span>-years
</th>
<th><span class="campus-system">Campus</span>-wide <span class="outcomeYear">6</span>-Year
<span class="outcomeTypeAbbr">Grad.</span> Rate
</th>
<th>Student Sub-Group: <span class="outcomeYear"></span>-Year <span class="outcomeTypeAbbr">Grad.</span> Rate</th>
<th>Gap (Difference from <span class="campus-system">Campus</span> Grad Rate)</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
JQuery:
//Initialize datatable
table = $('#datatable').DataTable({
cache: false,
scrollCollapse: false,
paging: true,
scrollX: true,
pagingType: 'simple_numbers',
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'All']],
searching: false,
info: false,
processing: true,
serverSide: true,
stateSave: true,
ajax: {
url: apiURL + '/table-data/',
data: function (d) {
d.campus = $campus.val();
d.studentType = $studentType.val();
d.cohort = $cohort.val();
d.outcomeType = outcomeType;
d.outcomeYear = outcomeYear;
d.outcomeTypeAbbr = outcomeTypeAbbr;
d.maxCohort = maxCohort;
}
}
});
JQuery for data change:
/* I have tried moving the dynamic text updates to before the table reload, and also using drawCallback to do these steps upon table draw. Neither changes anything. */
//Reload datatable
table.ajax.reload();
//Update dynamic text
$('.campus').html($campus.val());
$('.studentType').html($studentType.val());
$('.outcomeType').html(outcomeType);
$('.outcomeTypeAbbr').html(outcomeTypeAbbr);
$('.outcomeYear').html(outcomeYear);
$('.campus-system').html(cTxt);
This answer is actually from user andrewJames. He gave a possible solution in the comments that worked, but is declining to make it the solution.
The reason the column headers were misaligned when the data loaded while the focus was on another tab is that DataTables needs a visible viewport to calculate column widths. andrewJames's suggestion, which I tried with success was to add a table redraw to the tab on an oblick event.
Bootstrap's version of an onlick event for a navtab is actually the "shown.bs.tab" event. Here is my implementation of the solution:
/**
* When a tab is clicked.
*/
$(document).on('shown.bs.tab', '.dashboard-nav-link', function(e){
if(e.target.id == 'datatables_tab')
table.draw('page');
});
I'm using jquery datatables(angular datatables) with server side processing, the message 'processing' is above the table. I can change the position through sDOM (lfrtip), but is it possible to make it inside the datatable(put p into t)?
Yes...there are a few ways you can do this. I like to use a "loading gif". So, your HTML looks like this:
<table id="main_index">
<img id="loading_gif" src="images/ajax-loader.gif"> <!--this is your loading image or div-->
</table>
Then you want this .gif to be hidden once the table loads. You use datatables callback function for this. For example:
$("#main_compare").DataTable({
//all of your other datatables configuration followed by a comma then...
"drawCallback": function(settings, json) {
$('#loading_gif').hide(); //hides the loading image once table is loaded
//do anything else you want to have happen only once the table is loaded
}
})
EDIT
Based on your comment, I think this is what you're looking for.
If you want a message to appear within the area of the table while it's loading, you use this structure:
<table id="main_index">
<div id="table_processing">Whatever text you want</div>
</table>
You can then hide this using the code from my original answer to hide this div when the table loads.
The processing option needs to be set to true
and
In the sDom option the letter r was needed.
var options = {
"sDom": 'prtp',
"processing": true,
"serverSide": true,
"ajax": "/path/to/my/ajax.php"
}
var oTable = $('.datatables').dataTable(options);
I can`t solve this prestashop invoice problem. Prestashop use TCPDF to generate PDF invoice.
This is my footer.tpl code:
<table style="width: 100%;">
<tr>
<td style="width: 100%">
<img src="http://myshop.com/img/invoicefooter.jpg" />
</td>
</tr>
</table>
As u can see, I include image on footer. And Prestashop generate header and footer on every page. So its okey for me, but let you show:
This is example of invoice with 2 pages: first page footer ( http://prntscr.com/6nn5c9 ) and this is the last page footer - http://prntscr.com/6nn5lo
I cant understand whats wrong. I tried to look at TCPDF.php functions footer, getfooter() and etc..
Briefly, if I have 1 page PDF invoice it shows correct. If I have PDF invoice with 2 pages I got correct view only on last page...
Thanks for any help! Its very important for me..
Mh, I found a solution. I really dont know why and don`t have too much time to look for bug, but this method help me to add correct image on every page footer.
Extend PDFGenerator.php in prestashop/classes/pdf and look for function footer:
$this->Image($image_file, 11, 241, 189, '', 'JPG', '', 'T', false, 300, '', false, false, 0, false, false, false);
Use function Image to put image on footer. Now I can see correct image on every page.
I am new to Dojo and i came across a problem that has me completely stumped. I am creating a data grid in Dojo with the Enhanced Grid .
Each row in the grid has a checkbox with which the row can be selected. The checkbox has been implemented using the indirectselection plugin.
Now when i select a row using the checkbox everything works fine. But when I select a row by clicking on other data cells the row does'nt get selected !
Heres the JSP part of the datagrid
<table data-dojo-id="grid" data-dojo-type="dojox.grid.EnhancedGrid" plugins="{indirectSelection: {headerSelector:true}, filter: true,pagination: true}"
data-dojo-props="store:icGrid,
clientSort:true " formatterScope="myFormatters"
style="width: 100%; height: 20em;">
<thead>
<tr>
<th width="25%" field="empNo" formatter="formatLink">empNo</th>
<th width="25%" field="name">name</th>
<th width="25%" field="email">email</th>
<th width="25%" field="phone">phone</th>
</tr>
</thead>
</table>
If I remove the code referring to indirect selection (plugins="{indirectselection...) the rows get selected when I click on other data cells (as they should). But I also need the checkbox that the indirectselection implements.
Is there a way to make the indirectselection work without taking away the row select functionality ?
Take a look at the grid in the page I will link below. I need a grid that works like that
(The last grid in the page with the checkboxes)
http://dojotoolkit.org/documentation/tutorials/1.8/working_grid/demo/selector.php
I managed to resolve the issue by 1. using the cellClick event to listen 2. Get the rowindex of the cell when it is clicked 3. set it to selected.
grid.on("CellClick", function(event)
{
var rowId = event.rowIndex;
grid.selection.setSelected(rowId, true);
grid.render();
}
grid.selection.getSelected(); did not return the selected rows and I am wondering if this is a compatibility issue ? It seems like when i use the indirectSelection plugin the row Select is behaving in unexpected ways.
Have you ever heard about DGRID .
I think you should check it.
It really works very good with dojo .
Here are some useful sites .
Dgrid Main webpage
Git hub Documentation
Use this code below to listen to grid selection and check what selectedRows return and use the index of that row to toggleRow
dojo.connect(grid, "onRowClick", function(e) {
var selectedRows= grid.selection.getSelected();
grid.rowSelectCell.toggleRow(selectedRows[i], true);
});
Simple code :- "SelectionChanged"` even is available. so code like this:-
grid.on("SelectionChanged", function(event)
{
var rowId = event.rowIndex;
grid.selection.setSelected(rowId, true);
grid.render();
}
The "SelectionChanged"` even is available. so code like this:-
grid.on("SelectionChanged", function(event)
{
var rowId = event.rowIndex;
grid.selection.setSelected(rowId, true);
grid.render();
}