Hello,
I am using Data Table with Bootstrap Style, I am getting weird issue, My header is of the grid is not aligned with the body. I have given column width in percentage(%) as soon as I click on any column header and body aligned itself. I tried different option but it didn't work.
See attached HTML to replicate the issues.
Thanks for looking into it. I would really appreciate your help.
Thanks again
hello
var table = j$("Table[id$=GridTable]").DataTable( {
scrollY: "150px",
scrollX: true,
scrollCollapse: true,
paging: false,
"bInfo": false,
"bFilter": true,
"bRetrieve": true,
"order": [0,"desc"] ,
"columns": [ null,
null,
null,
{
"data": "office", // can be null or undefined
"defaultContent": ""
}
]
} );
new j$.fn.dataTable.FixedColumns( table,{
leftColumns: 2
} );
var table = j$("Table[id$=GridTable]").DataTable( {
scrollY: "150px",
scrollX: true,
scrollCollapse: true,
paging: false,
"bInfo": false,
"bFilter": true,
"bRetrieve": true,
"order": [0,"desc"] ,
// "columns":[{"defaultcontent":""}]
} );
new j$.fn.dataTable.FixedColumns( table,{
leftColumns: 2
} );
can anyone help me on this stackoverflow question :- https://stackoverflow.com/questions/41425765/datatables-search-inside-csv-regex
How to change the sort icon position in table header, Dynamically icon coming at right side corner or left side corner.I want to icon move position beside column header text in table header.
I'm using DataTables with jquery ui integration and the scroller add-on. It works fine for the most part, but the loadingIndicator isn't working properly when searching.
When scrolling down quickly the loading indicator appears, but when searching, nothing appears.
My initialization code is:
var dt = $this.DataTable({
'processing': true,
'serverSide': serverSide,
'searchDelay': searchDelay,
'ajax': url,
'columns': cols, // array with column definitions
'pageLength': 15,
'lengthMenu': [15, 30, 50, 100, 250, 500],
'scrollY': height,
'order': order,
'deferRender': true,
'scroller': {
'loadingIndicator': true,
'serverWait': 500
},
'autoWidth': autowidth
});
So I've got both processing and scroller.loadingIndicator set to true, but still no indicator appears when searching. Any clues?
I need to create a filter on a tipical columns created with images: each field is an image with this format:
<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>
I've created a fiddle example here.
An explication:
* there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
* Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
* As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).
Thanks in advance.
if i only want to fetch data "WHERE key = 'key' " and not the entire data from the table, how can i do this?. + is it also possible to dynamically call the data up into text inputs and not just ordinary table cells <td>. Thank you.
Hi All,
I am trying to use DataTables Plugin in our POC, while using the Below code
$('#MyTable').DataTable() it is showing Object Doesn`t support the method DataTable (Java Run Time Error) is anybody faced this problem? Any solution?
Hi all,
I'm using the built-in button File export - Excel HTML5 (https://datatables.net/reference/button/excelHtml5) to provide the ability to export the current datatable to Excel. What I'm seeing is that, when the dataset is large, this process (since you click the 'export' button until the file starts downloading) can take several seconds, and the screen is 'frozen' until the download starts, so the user can't perform any action. Ideally, I would like to show a 'spinner/loading' during this process (as it's not asynchronous) and hide it when the download starts, but I can find anywhere in the documentation (https://datatables.net/reference/api/#buttons / https://datatables.net/reference/option/#buttons) if there is any event in the plugin where I can attach this action.
I've only seen this action: https://datatables.net/reference/option/buttons.buttons.action but this is fired when the button is clicked and the action starts. Also found this: https://datatables.net/reference/api/%24.fn.dataTable.fileSave() but it refers to the FileSaver.js documentation, and there I can't find any event related to the 'end' of the action.
Any help or guideline about this would be highly appreciated.
Thanks in advance,
Hello,
1./ Show / hide controls when selecting value in select box control
I would like to know if it is possible to show / hide some controls when creating or modifying a line with Editor control like it is done with dependent field but with a select control filled from SQL select.
In fact, I have a select box control filled from another (join) and when I select a value in this control; depending of the selected value; I want to show or hide some controls.
So what is the way to bind event on the select box control in order to do that?
2./ have extra data on select box control
And also, is it possible the have a third data associated to the select.
For example, the select control can only have a key and a associated value.
Field::inst('t1.key')
->options(Options::inst()
->table('t2')
->value('key')
->label('value')
)
->validator('Validate::dbValues')
But in my case, I need to have a third value from my join table.
This third column has to be used to determine the controls I have to show / hide in the html form
It could be add to an html 5 data attribute like that:
<option value="mykey" data-attr="myThirdValue">My value</option>
I hope that my question is not too confused (sorry for my bad english)
Thanks in advance and have a nice day.
Hi all,
i am currently trying to set up some frontend tests with selenium and can't get selenium to open an editor inline edit.
what i tried is:
1. Scriptexecuter with jQueryselector Click: executor.executeScript("$('#singleCompanyTable tr:first td:eq(12)').click();");
2. Click on WebElement via xPath
3. Also tried the DataTables cell-selector with a click call afterwards.
None of these works. Has anyone an idea how i get selenium to click on that cell?
When i load the page,the datatable script works,but once i apply filters,and the data in my table change (i mean seen),if i want to export a pdf,the pdf is the same at launch as the one after the filter is applied
The upload seems to work very well. What I want is where the user can select from a list of images already uploaded (maybe with a filter) OR upload a new image. How can I accomplish this?
Currently it works but every row in the Editor uploads a new file. This can be a problem if the user wants to update the file that might be linked on multiple rows.
Is it possible to combine the Select Inputs and the Text Inputs? I use DataTables on several tables, always the same initialization. I would like to chose the column for the Select Inputs by the column header since the column that I want the select list on is not always in the same position. Then all the others I want to have the Text Inputs. This way I'll have one column that has the Select Inputs and all others that have the Text Inputs.
I have been able to implement the different Select and Text Inputs from these two examples. But I'm not good enough with jquery and javascript to figure out how to select the right column for the Select input and have all the others be Text inputs. The tables that I use can be anywhere from 3 columns to 75+ columns. And I want to select the column by the header name for the Select input.
And on top of all of this, is there a way to make the Select Input a MultiSelect Input? I am having it a selector for the state and would like to be able to select multiple states at once.
Hi,
is it possible to use extract button when I use DataTables for bootstrap4?
Thanks
The date picker on IE and Firefox does not take into consideration the "scrollTop" value. This causes the datepicker to go to above the field when it does not need to be.
This can be fixed by doing the following:
Change _position function in DateTime:
var scrollTop = $('body').scrollTop();
To:
var scrollTop = $('body').scrollTop();
scrollTop = scrollTop > 0 ? scrollTop : $('html').scrollTop();
Can we please fix this on the next version?
Hi,
I have added a toogle button to the bootstrap datable and its working.
Its changed to normal checkbox when it come to modal view. I will attached the 2 screenshot.
$(document).ready(function() { $('#datatables').DataTable( { "processing": true, "serverSide": true, "ajax": "view-all-listing-process.php", "aaSorting":[[0, "desc"]], "fnDrawCallback": function( oSettings ) { $('.ajax').colorbox({width:"700", height:"670", iframe:true}); initRating(); }, responsive: { details: { display: $.fn.dataTable.Responsive.display.modal( { header: function ( row ) { var data = row.data(); return 'Details for '+data[0]+' '+data[1]; } } ), renderer: $.fn.dataTable.Responsive.renderer.tableAll({ tableClass: 'table' }) } } } ); } ); function initRating(){ $('.BSswitch').bootstrapToggle() }please help me to fix it
Hello,
I'm currently writing an application using Angular 2 and have it configured to use DataTables.net, DataTables.net-bs, and DataTables.net-select.
For the most part, everything looks and works great. With one exception, the pagination for the application shows up with as though no styling is applied.
I checked the source within the browser and the default classes and HTML structure is applied:
<div class="dataTables_paginate paging_full_numbers" id="myTable_paginate">
<a tabindex="0" class="paginate_button first disabled" id="myTable_first" aria-controls="myTable" data-dt-idx="0">First</a>
<a tabindex="0" class="paginate_button previous disabled" id="myTable_previous" aria-controls="myTable" data-dt-idx="1">Previous</a>
<span>
<a tabindex="0" class="paginate_button current" aria-controls="myTable" data-dt-idx="2">1</a>
<a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="3">2</a>
<a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="4">3</a>
<a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="5">4</a>
<a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="6">5</a>
<span class="ellipsis">…</span>
<a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="7">580</a>
</span>
<a tabindex="0" class="paginate_button next" id="myTable_next" aria-controls="myTable" data-dt-idx="8">Next</a>
<a tabindex="0" class="paginate_button last" id="myTable_last" aria-controls="myTable" data-dt-idx="9">Last</a>
</div>
The functionality of the links work and the it just looks ugly on the display because I'm using the DataTables Bootstrap CSS and it is not outputting the appropriate HTML using an unordered list. I went into the debugger in the browser and the code for the DataTables.net-bs is being loaded. I added a bunch of break points to the JavaScript and the factory method is being called. However, it appears that it is never called again.
Here is the relevant code for my vendors.browser.ts
require('datatables.net')();
require('datatables.net-bs')();
require('datatables.net-select')();
require('file-saver');
I also have AMD turned off because I know that was an issue for some people. Here is the relevant code for the webpack.common.js file:
{
test: /datatables\.net.*/,
loader: 'imports?define=>false'
},
As an aside, the other plugin, Datatables.net-select, functions properly.
If I can't figure this out, I can use the styling included in DataTables.net-dt, but I would much rather get this working properly.
Does anyone have any potential ideas on what is going on?