Any reason why i can't use a Select2 in Editor to multi-select?
Is there an example anywhere?
Mick
↧
Select2 Multselect
↧
Datatables “footerCallback” function not displaying results in footer
I am try to get a sum of each column and display the result in the footer. I'm using "footerCallback" function that Datatables provides. However it is not displaying anything in the footer
Datatables explains "Note that if the table does not have a tfoot element, this callback will not be fired." So I've added tfoot to the table so the callback will be fired
<table id="monthlytable" class="display" cellspacing="0" width="100%"><thead></thead><tfoot></tfoot></table>
Callback funtion:
"footerCallback": function ( tfoot, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 3 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
var numFormat = $.fn.dataTable.render.number( '\,', '.', 2, '£' ).display;
$( api.column( 3 ).footer() ).html(numFormat(total));
}
I've tried using "headerCallback" with the same code as above (altered to display in the header) and it works perfectly fine.
Is there a reason why headerCallback works but not footerCallback?
↧
↧
Editor displays Under Table instead of in the pop-up window
The editor is displaying under my bootstrap page instead of displaying inside of a pop-up window. Seems like a css issue.
Update: The issue was resolved by adding the appropriate css file.
↧
Trying to create a yadcf filter for a column with images
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.
↧
Datatables not loading coumn data even though it's there
I have a part of the datatables setup being built using php. I then load that into the JS to dynamically generate the table as I need. This is working like a charm. Example below:
$reviewer_fields = '';
if (isset($reviewers) && $reviewers) {
foreach($reviewers AS $ukey => $uvalue) {
$title = str_replace('_', ' ', $uvalue);
$reviewer_fields .=
<<<EOT
{ title: '$title',
data: '$uvalue',
render: function ( data, type, full ) {
if (data != null) {
return data;
} else {
return '---';
}
}
},
EOT;
}
}
↧
↧
Problem with Select2 and inline editing - possible bug?
Hi,
I've a problem with the Select2 plugin and inline editing. If I click the cell it shows the Select2 box with the search box focused as expected. However, if I click on the search box (or on any white space that isn't an option in the select) the datatables cell loses focus, the Select2 dropdown remains visible. Clicking on white space below the dropdown doesn't remove it and choosing an option doesn't update datatables.
I can't link to a live version right now but I've uploaded screenshots of a basic example, imgur.com/a/XHcYG.
I'm using the latest version of datatables, editor and 4.0.1 (and later) of Select2. I've stripped out all styles except of the base editor style and the Select2 style but hopefully you'll get the idea.
↧
This worked a week ago.
Now, not so much. Can't figure out, am getting a console error that I don't understand.
https://www.star.nesdis.noaa.gov/smcd/GCC/MeetingActions.php
Error:
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
at Ja (jquery.dataTables.min.js:24)
at N (jquery.dataTables.min.js:16)
at HTMLTableRowElement.<anonymous> (jquery.dataTables.min.js:16)
at jquery-2.1.4.min.js:2
at Function.map (jquery-2.1.4.min.js:2)
at n.fn.init.map (jquery-2.1.4.min.js:2)
at ma (jquery.dataTables.min.js:16)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:95)
at Function.each (jquery-2.1.4.min.js:2)
at n.fn.init.each (jquery-2.1.4.min.js:2)
Ja @ jquery.dataTables.min.js:24
N @ jquery.dataTables.min.js:16
(anonymous) @ jquery.dataTables.min.js:16
(anonymous) @ jquery-2.1.4.min.js:2
map @ jquery-2.1.4.min.js:2
map @ jquery-2.1.4.min.js:2
ma @ jquery.dataTables.min.js:16
(anonymous) @ jquery.dataTables.min.js:95
each @ jquery-2.1.4.min.js:2
each @ jquery-2.1.4.min.js:2
m @ jquery.dataTables.min.js:85
h.fn.DataTable @ jquery.dataTables.min.js:164
(anonymous) @ MeetingActions.php:1812
j @ jquery-2.1.4.min.js:2
fireWith @ jquery-2.1.4.min.js:2
ready @ jquery-2.1.4.min.js:2
I @ jquery-2.1.4.min.js:2
Any advice very much appreciated. This instance of datatables has been running for a couple of years, and just started flaking out recently. We changed the data source .csv file, but I don't see anything weird about it that I can understand.
↧
Using datatable in salesforce lightning component
Hi,
I am using datatable in salesforce lighting component, its working fine expect I am getting this warning when lightning locker service is enabled.
WARNING: SecureElement: [object HTMLDivElement]{ key: {"namespace":"c"} } does not allow getting/setting the disabled attribute, ignoring!
Locker service in salesforce prevent:
Components from causing XSS and similar security issues
Components from reading other component’s rendered data without any restrictions
Components from calling undocumented/private APIs
I am afraid it might stop working some day.
Thanks,
Rehan
↧
Responsive datatable and buttons in the last column
Hi, I have datatable with buttons(delete/edit) in the last column. I am using responsive table.
When the screen is done small, a button appears in the first column to show the details and my buttons(delete/edit) go to a child row.
When the screen is bigger. I have used the next code in JS to handle the edit/delete buttons:
/ok to big screen/
var btnDel=$('#mytable tbody').on( 'click', 'button.eliminar', function () {
var data=table.row($(this).parents('tr')).data();
var pront=data.pront; // this is my data row id
var row = $(this).closest("tr").get(0); //here is the row containing the clicked button
..other staff
});
Now, when the screen is smaller(with responsive table), this is not working.
How could I do it work to small screen?
Here is the source code when the child is showing:
| Pront | Nome | Endereço | Bairro | Cidade | UF | Telefone | Convênio | CPF | Opções | |
|---|---|---|---|---|---|---|---|---|---|---|
| Pront | Nome | Endereço | Bairro | Cidade | UF | Telefone | Convênio | CPF | Opções | |
| 21 | JACENI FERRARI ALENCAR | R ARAGUAIA | PARQUE CHUNO | DUQUE DE CAXIAS | RJ | 35637685 | BRADESCO (B) | 02570293709 | jaceni@ig.com.br | |
|
||||||||||
| 23 | PEDRO HENRIQUES MARTINS SOUZA | rua 18 de outubro 241 101 | tijuca | RIO DE JANEIRO | RJ | CASSI | ||||
↧
↧
Datatable problem with backslash in server data processing
I am using server processing with datatables.
This is my ajax returning data.
I found an error when I have a backslash in the string :
{"DT_RowId":"4427","pront":"4427","nome":"JOHN DOE","conv":"PETROBRAS\ DISTR ( R)","cpf":"","email":""}
See:"PETROBRAS\"
In this case, I found that backslash was the cause of the problem.
I know I can solve this particular problem, but the table database I am using has many rows, and may be, can have others chars that can cause problems to JavaScript in my page
Is there some settings in datatable to avoid it?
↧
Dynamic TreeGrid Data Table
Dear Sir,
I want to generate datatable as shown in attached file.
I have following Hierarchy structure.
Country->State->District->Village
also find below sample queries.
1)Query1- select country_name,count from demoTable;
2)Query2- select state_name,count from demoTable where country_name=?;
3)Query3- select Discrtict_name,count from demoTable where country_name=?,state_name=?;
4)Query4- select Village_name,count from demoTable where country_name=?,state_name=?,Discrtict_name=?;
when I click on '+' sign of Country1 ,Query1 will be fired & table should be expanded to state1,state2 & state3 depending on dynamic results of Query1
when I click on '+' sign of State1 ,Query2 will be fired & table should be expanded to District1 & District2 ,In this way all levels will be opened.
Pl note each query should be fired when we click on '+' sign.
Kindly also suggest any events so that I can call Ajax.
↧
Use "HTML5, Flash export button" function. 1000 rows export is very slow ...
Hello everyone!
I am migrating "C / S" programs in Korea using "DataTables".
I'm using Google Translator to ask a question.
Thank you for your understanding.
I am trying "TEST" hard now ...
Https://datatables.net/extensions/buttons/examples/html5/simple.html
Https://datatables.net/extensions/buttons/examples/flash/simple.html
I created an "export" function using the two functions above.
But,
Little rows "export" are fine, but ...
More than 1000 rows takes considerable time.
I want to get some advice on this part.
First, my development environment
- The latest version of "DataTables" related plug-ins.
- Spring, ibatis, oracle, java 1.8
- IE 11, Chrome 55.0.2883.87 m (64-bit)
- ajax
Etc
(Let me know if I have more information)
Second, the "DataTables" script
Https://datatables.net/extensions/scroller/examples/initialisation/large_js_source.html
Using the above functions
Function fn_search () {
Var parm1 = $ ("# srchParm1"). Val ();
If (parm1 == null || parm1 == "") {
Alert ("Please select parm1");
Return;
}
$ .ajax ({
Type: "POST",
DataType: "json",
Async: false,
Url: "/listTest.json",
Data: {
Parm1: parm1,
},
Success: function (data) {
Var items = [];
$ .each (data.listTest, function (idx, item) {
Var row = idx + 1;
Items.push ([
Row,
Item.name,
Item.telNo
]);
});
DoMasterInsertData (items);
},
Error: function (request, status) {
Return;
}
});
}
Function doMasterInsertData (data) {
$ ("# MasterTable"). DataTable ({
"Buttons": ['excelFlash'], //Or 'excelHtml5'
"AutoWidth": true,
"Destroy": true,
"Data": data,
"ScrollX": true,
"ScrollY": "70%",
"ScrollCollapse": false,
"Paging": true,
"PagingType": "simple_numbers",
"Info": false,
"Searching": false,
"Dom": '<"top"> rt <"bottom" Bflp> <"clear">'
"DeferRender": true,
& Quot; lengthMenu & quot ;: [[20, 30, 50, 100], [20, 30, 50, 100]
"Columns": [
{ClassName: "grid_data_c"},
{ClassName: "grid_data_c"}
]
"Language": {
"EmptyTable": "Data does not exist.",
"LengthMenu": "maximum bar MENU",
"Paginate": {
"First": "First",
"Last": "last",
"Next": "Next",
"Previous": "previous"
}
},
"InitComplete": function (settings, json) {
CommonObj.innerInputBind ("masterTable");
CommonObj.innerSelectBind ("masterTable");
CommonObj.gridResizeId ("masterTable");
SetTimeout (function () {commonObj.gridOrder ("masterTable", [0, "asc"]);
},
"FooterCallback": function () {
Var api = this.api ();
If (api.data (). Length> 0) {
$ (Api.column (0) .footer ()). Html (api.data (). Length.money () + "key");
}
}
});
}
Separately call "ajax" and draw "DataTables".
By doing this,
Is the export speed slower, of course?
If so, change the script as shown below
Is it possible to solve it?
Https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html
I'll change the ajax call in the DataTables until the answer comes up
I'm sorry I could not include the js example.
Thank you for reading.
↧
Integration with Gravity forms
Hello
How to show Gravity forms entries in a datables? How to integrate this?
Thanks!
↧
↧
Paged table and additional getJSON calls on visible rows only
We have data that is stored in Access databases (not my choice but we need to deal with it) and I need to display information which is pulled from a number of different tables across different databases. We've been using a homebrew system for a while which has limited functionality and DataTables seems to be the perfect solution but I can't quite get the functionality I'm looking for.
The user enters a query in a form field and the results are populated in numerous DataTables objects and made visible to the user. The results for a query can be as little as 1 or in the 100's. After the initial query returns and DataTables has been filled and displayed to the user, some DataTables require additional getJSON calls to query another database which updates a couple cells for each row. The cells are initially filled with loader icons until the getJSON returns and the cells are populated with the result.
DataTables is initialized to "page" the results and allows the user to filter the results as well. I used the createdRow callback but it doesn't appear to be what I want as it will execute for all rows, not just those displayed. If the initial results are in the 100's, I don't want to be making 100's of getJSON calls, I only want calls for the data currently displayed.
So how do I only update the cells that are visible for paged results? Are there specific callbacks to be used, or how do I get a list of visible rows regardless if a page change occurred or the results have been filtered?
View after DataTables has loaded the initial results and performing addition getJSON calls to fill the "Warranty" column for each row
View after DataTables has finished getJSON calls for each row
↧
Sorting by computed column doesn't work (server side)
Hello @Alan
Please check this bin with Access-Control-Allow-Origin enabled
Check the Priority column. It doesn't seem to be ordered. Table is ordered by column #0 instead...
Screenshot
I've also tried data render within ColumnDefs - same problem. When I tried the same with no server side data load - works fine,
Will appreciate your help!
Thanks
↧
Update jquery datatable when data displayed through filters change (Angular 2)
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
↧
help meeeeeeeeeee
i want to access data columns a row in datatable
↧
↧
Json
How to learn to json data get in to the bootstrap tables .
Thanks
↧
I want to serach by special character
hi ,
can i customize it to search the record by special characters line ', " &,_,- .. etc
thanks
Praveen
↧
Search for all rows having an empty cell
Hi there,
i'm struggling to find a solution with latest version of DT.
I've a large table with rows that might contain empty values.
When these cellsare empty, they already have a css class applied on (<td class="empty">) , as well as the row (<tr class="hasEmpty">).
These empty cells can be in any column (except the first which always contains a value - not sure if relevant)
Then i'd like to have a button outside the table to show all rows that contain at least one cell which is empty.
Is there a way do to this?
Based on the empty value as a regExp ? ( '^$' ) Or maybe the <tr> class which is already applied ?
myTable.columns().search('^$').draw() will return no result.
(nor myTable.columns().search('something').draw() , although there is "something" in some cells, not sure why...)
Thanks for your help !
↧