Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 81393 articles
Browse latest View live

Hidden Column with responsive dataTable

$
0
0

I'm hiddening the columns with the following codes:

$(document).ready(function() {
$('#example').DataTable( {
"columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false
}
]
} );
} );

but after this, the responsive layout of dataTable doens't work.

I've already put the code "responsive: true" but also didn't work.


Activate keyboard layouts in forms

$
0
0

Is there a possibility for mobile devices enabling the specific keyboard layout in forms or inline edit as provided in HTML5 (Input-Types)?

Add nested tables to row as child row and search the table as well as child rows

$
0
0

I can't seem to get nested tables rowing as the row's childs.

$('tbody').on('click', 'span', function () {
                var tr = $(this).closest('tr');
                var tableApi = "";
                var Json = ""

                if ($(this).closest('table').attr("id") === 'upgrade-cards-table') {
                    tableApi = upgradeTable;
                    Json = upgradeCardsJson;
                } else if ($(this).closest('table').attr("id") === 'non-upgrade-cards-table') {
                    tableApi = nonUpgradeTable;
                    Json = nonUpgradeCardsJson;
                }

                var row = tableApi.row(tr);

                if (row.child.isShown()) {
                    $(this).attr("class", "glyphicon glyphicon-chevron-right");
                    row.child.hide();
                } else {
                    if (row.child() === undefined) {
                        var key = this.id;
                        var cardDictionary = (Json[key])["CardsDictionary"];
                        var table = $(row.child()).DataTable({
                            "paging": false,
                            "searching": false,
                            "info": false,
                        });
                        
                        var table = row.child(format()).show();
                        jQuery.each(cardDictionary, function (i, value) {
                            var cardDefinition = value["CardDefinition"];
                            console.log([cardDefinition["DisplayName"], value["Name"], cardDefinition["RarityId"], value["OwnedCount"]]);
                            table.row.add([cardDefinition["DisplayName"], value["Name"], cardDefinition["RarityId"], value["OwnedCount"]]).draw();
                        });
                    } else {
                        row.child.show();
                    }
                    $(this).attr("class", "glyphicon glyphicon-chevron-down");
                }
            });

        // Child Table Generator()
        function format() {
            return $('<table><thead><tr><td>Name<td><td>Id</td><td>Rarity</td><td>Owned</td></tr></thead></table>').toArray();
        }

I have this code. So the user clicks a row and that row is used as a key to look up what the values for the child table should be and it generates the table. Currently this code just shows the column headers and that's it.

Buttons is breaking UIkit theme structure

$
0
0

Hi,

I am using UIkit for my tool and so I have integrated DataTables and required components to it. I am using pageResizer to auto resize the table inside its container. UIkit being rendered properly without any issues.
Here is what I am importing to the html page to make it work.

<!-- UIkit -->
<link rel='stylesheet' href='css/uikit.min.css'>

<!-- dataTables -->
<link rel='stylesheet' href='css/dataTables.uikit.css'>

<!-- jQuery -->
<script src='js/jquery-3.3.1.min.js'></script>

<!-- dataTables -->
<script src='js/jquery.dataTables.min.js'></script>
<script src='js/dataTables.uikit.js'></script>

<!-- UIkit -->
<script src='js/uikit.min.js'></script>
<script src='js/uikit-icons.min.js'></script>

<!-- Additional dataTables plugins/Extensions -->
<script src="js/dataTables.pageResize.min.js"></script>

Everything works okay so far.

Now I am trying to import the Buttons extension and it breaks the code for table being rendered with UIkit classes.

<script src="js/dataTables.buttons.min.js"></script>
<script src="js/buttons.html5.min.js"></script>

I have captured pictures from Developer Tools (F12) in Chrome to see the difference in structure.

I am 99% sure that I am using the correct configuration when initializing the table but it is something wrong inside the Buttons extension script that is breaking it up. I am suspecting that possibly because Buttons Extension is still not utilized for UIkit yet ?

It would be great if we can fix that so that I can use buttons on my tool. Thanks.

Official version of Bulma theme for Datatables

$
0
0

Hey,

do you have any plans on creating Datatables theme based on Bulma CSS framework?
Foundation is supported officialy and is less popular than Bulma (27k vs 30k Github stars) so I think that Bulma does deserve some attention.

Also there are several unofficial packages but one with over 300 downloads per week.

Appreciate your answer and consideration.

Have a nice day!

Unable to load data from "json.txt"

$
0
0

$(document).ready(function(){ $('#testrowTable').dataTable({ "ajax" : "assets/data/test.txt", "ajax" : { url: '/assets/json-file', dataSrc: ""}, "columns" : [ { "data" : "user_id" }, { "data" : "first_name" }, { "data" : "last_name" }, { "data" : "full_name" }, { "data" : "user_name" }, { "data" : "user_type" }, { "data" : "user_type_name" }, { "data" : "is_active" }, ] }); });

Greetings. Hi guys.
here i attached a screenshot pic.
may someone help me why i cant load my data into the table? i

Getting Error "Uncaught TypeError: Cannot read property 'aDataSort' of undefined"

$
0
0

Hi I am getting response like {"empList1":[],"empList2":[]}
and I want to render those on jsp where I have created table and in .js file I'm rendering like -
[I am getting isSummaryDataTableExists , detailDataTableReportName also]

$('#'+detailDataTableReportName).DataTable({
"bServerSide": false,
"aoColumns":[I'm getting columns name list here],
"bProcessing": false,
"data": [I'm getting response here],
"bJQueryUI": false,
"bFilter": false,
"bSort":false,
"dom": 'rt<"bottom"flp> ',
"fnInitComplete" : function(oSettings, json) {
if ($("#"+detailDataTableReportName).dataTable().fnSettings().aoData.length == 0) {

            }else{

            }
     }
});
if(isSummaryDataTableExists) {
        $('#'+detailDataTableReportName+'Summary').DataTable({
               "bServerSide": false,
               "bProcessing": false, 
               "data": [I'm getting columns name list here],
               "aoColumns":[I'm getting response here], 
               "bJQueryUI": false,
               "bFilter": false,
               "dom": 'rt<"bottom"flp> ',                             
               "bSort":false,
               "paging": false,
               "lengthChange": false,
               "fnRowCallback": function( nRow, aData ) {
                   if(!isSummaryDataTableHeaderExists) {
                         $("#"+detailDataTableReportName+"Summary thead").remove();   
                   }
                   var $nRow = $(nRow); // cache the row wrapped up in jQuery
                   $nRow.css({"background-color":"#f5f5f5","font-weight": "bold"});
                   return nRow;
                },
               "fnInitComplete": function (oSettings, json) {
                    if ($("#"+detailDataTableReportName+"Summary").dataTable().fnSettings().aoData.length == 0) {
                          $('#'+detailDataTableReportName+'Summary').parents('div.dataTables_wrapper').first().hide();
                    }
                } 
        });     
    }

Please help I'm not able to find where I'm doing mistake.

Ajax timeout maybe?

$
0
0

Recently one of my tables has stopped working in my production environment. As far as I'm aware nothing has changed on the hosting server and all of my other tables on the same site are working fine. When opening the page with the table I get the Invalid JSON message.

https://ibb.co/n0MmQF

If I then dig into the developer console it show that I am not getting any response from the php page. The exact same page is working fine in my local testing environment so I'm not sure where to even start looking. Can anyone give me any suggestions?

https://ibb.co/nsrWsv
https://ibb.co/iYn4Cv
https://ibb.co/hXqfkF


cloning tables

$
0
0

i have a prototype table structure (with its callback functions inside) generated on the fly by ajax (number of columns and rows will always be the same for each table), i need to clone several times that prototype and populate each copy with data returned by ajax;

is it possible (and how)

Thanks in advance

Does Inline Editor Work on Mobile?

$
0
0

Hi guys,

I tried using google chrome on mobile. When I press on the cell, it does not activate the keypad. Does Datatables support inline editing on mobile?

set datatable source as json

$
0
0

how to set datatable source as json

Is it possible to send ajax request outside datatable

$
0
0

Hello,

Is it possible to send ajax request outside DataTable()? allows me to use DataTable only for draw

Thank you

Special Charecters = How are they saved and converted? Eg. Ö

$
0
0

If I save the name Özlem Yüce into my mySQL db via DataTables it is saved as Özlem Yüce

How is this being saved in the database? I'm using PHP and tried iconv to convert but without total luck.

eg. if I look through my database results (returning the above) and use iconv as follows:

iconv("UTF-8", "ISO-8859-1//IGNORE", $name);

This will convert to:

�zlem Yüce

Any ideas where I am going wrong or a better way to access these special chars saved to the db with DataTables? Thanks

Datatables and Websockets

$
0
0

I made a lot of researching about websockets on Datatables and unfortunately my research was pretty poor (or I am bad programmer on Javascript :smile: ).
I have a MySQL database with about 500.000 rows. So far, the best way I have successfully return my data back, is ServerSide with the SSP class. No matters how many results I have into my database. Have in mind that all these data are updating every about 10 seconds. With a simple ajax query every 5 seconds I could have the updated data on my client side.
The ajax return can give me TotalRecords, TotalDisplayRecords etc. So I came with the idea to have some resources savings from the serverside and create websockets. First of all, it is impossible to push 500.000 rows on initial call to first build my datatable. Second there is no way that you can send only updates through ajax ot websockets, as the updates will be again as much as the totalrecords. So my question is, how can I implement, initial start through websockets and have the functionality of serverside (SSP class) script?
PS: I am very curious why datatables are not implementing a websocket plugin or API, since, pretty much people are already trying to do so?

Regards,
Vasili

Can we use Datatables Editor php library with database functions ?

$
0
0

We use PostgreSQL and we do not work directly with database tables, for example all data manipulation is done by using custom database functions. Our database admin makes all functions

for example:
SELECT f_register_service ( '{"service_name":"Testing"}' ); //returns service_id

SELECT f.service_id, f.service_name FROM fr_service_time() AS f //returns rows

SELECT f_create_update_customer(0, 'customer name') AS f //returns customer_id, 0 - new customer

As we see from examples Datatables editor is mostly designed to work with database tables directly. Can we use Datatables Editor default PHP library in our case and how we should do that ?


Accessibility of column visibility button

$
0
0

I'm evaluating the accessibilty of DataTables for a project and I'm almost on-board, but the column visiblity menu control is an issue due to not conforming to the latest ARIA 1.1 authoring practices for menus. I want to help make your widget accessible for all users so I've listed what's done right and what needs work.

The good:
* Column visibility button utilizes the "aria-haspopup" attribute to indicate that a menu is attached.
* Menu container has the appropriate "menu" role.
* Keyboard focus returns to the column visibility button when closing menu with Esc key.

The bad:
* Column visibility button is missing the "aria-expanded" attribute.
* Menu item buttons are missing the role="menuitem" attribute.
* Menu item buttons should not be placed in tab order.
* Keyboard focus not set to the first menu item/button when the menu is opened.
* Menu displayed in what visibly appears as a modal dialog, but does not have dialog structure or expected keyboard interactions which is confusing from keyboard-only user perspective.

I suggest that the DataTables dev team take a look at the code examples from the W3C and from Heydon Pickering to ensure that the all users can interact with the column visibility menu.

Keep up the great work!

Create multiple rows with multiSet().

$
0
0

Hi !
I've got a question about editor.multiset() - see the code below.

function impNmapDataMultiSet (dataNmap, j) {
        customElement.text(j + "/" + dataNmap.length);
        tableCust=   $('#customer').DataTable();

        editorNessus.create(dataNmap.length, false)
            .multiSet('ip', dataNmap[j]['ip'])
            .multiSet('mac', dataNmap[j]['mac'])
            .multiSet('netbiosname', dataNmap[j]['netbiosname'])
            .multiSet('os', dataNmap[j]['os'])
            .multiSet('start', dataNmap[j]['start'])
            .multiSet('stop', dataNmap[j]['stop'])
            .multiSet('plugin_id', dataNmap[j]['plugin_id'])
            .multiSet('plugin_name', dataNmap[j]['plugin_name'])
            .multiSet('port', dataNmap[j]['port'])
            .multiSet('protocol', dataNmap[j]['protocol'])
            .multiSet('cve', dataNmap[j]['cve'])
            .multiSet('cvss_base_score', dataNmap[j]['cvss_base_score'])
            .multiSet('service_name', dataNmap[j]['service_name'])
            .multiSet('description', dataNmap[j]['description'])
            .multiSet('solution', dataNmap[j]['solution'])
            .multiSet('kundenr', dataNmap[j]['kundenr']);
        
                console.log(dataNmap[j]);
                j++;
                if (j < dataNmap.length) {
                    setTimeout(function () {
                        impNmapDataMultiSet(dataNmap, j);
                    }, 100);
                }
                else {
                    editorNessus.submit();
                    $('#nmapTable').busyLoad("hide");
                    $.busyLoadFull("hide");
                }
        tableCust.draw();
    }  

I'm trying to use multiSet() to create several rows imported from a file. The code above works, but it creates the same data for all the rows.. I've read some other posts which says that I need to have the Count of rows to create, as I've done with the lenght of my array (dataNmap.lenght), in my create method (editorNessus.create(dataNmap.length, false)).

What am I missing?

Have a great day!

I want show total of salary when i will search for specific

Scroll DataTable => Missing parameters on form submit

$
0
0

I'm trying to submit a form. Inside the form there is a table that is dynamically populated. 10 parameters are sent for each row. The submit works fine with small data but it seems to have a limit with large data. Some times the parameters of the first rows are missing and some times are the parameters of the last rows. This is totally random. But the limit seems to be always the same.

If I do not use Datatable the submit works just fine. Even if I'm not using pagination, Datatable is limiting the number of rows the form can POST.

Here is the DataTable code:

$('#tbl-stats').DataTable({
            deferRender: true,
            scrollY:     400,
            scroller:    true
});

I'm using DataTables 1.10.18 & jQuery v3.3.1

My users are used to DataTables and I'll want to continue using it. Any ideas on how to avoid that limit?

Thanks in advance for your help!

require('datatables.net-buttons') has made a lot of errors

$
0
0

require( 'jszip' );
require( 'pdfmake' );
require('datatables.net');
require('datatables.net-buttons');
require('datatables.net-buttons/js/buttons.flash.js');
require('datatables.net-buttons/js/buttons.html5.js');
When I use webpack to pack up, there're many errors liked Module not found: Error: Can't resolve 'fs' in '...'

Viewing all 81393 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>