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

Duplicate table header is created when scrollY is enabled..

February 8, 2017, 8:51 am
$
0
0

Without the horizontal scrollbar, the table displays fine without any duplicate TH. Once we enable scrollY, as you can see in the image, the TH is duplicated and additional white space is created. I've seen others who have posted with a similar issue but without any response. Please advise.

Also, this issue only occurs on IE. (Version 11.0.9600.18537CO)

            var table =   $('#multemp').DataTable({
            "bPaginate": false,
            "bSort": true,
            "bFilter": true,
            "bJQueryUI": false,
            "bProcessing": true,
            "scrollY": "350px",

            "bScrollCollapse": true
↧
Search

Language, "decimal point is comma" not working

February 3, 2017, 8:33 am
$
0
0

Hi Allan,
I am using this in the table default settings:

    //Data tables language settings
    if (lang === 'de') {
        showAllLabel = 'Alles anzeigen';
        $.extend( true, $.fn.dataTable.defaults, {
            "language": {
                "decimal": ",",
                "thousands": ".",
                "info": "Anzeige _START_ bis _END_ von _TOTAL_ Einträgen",
                "infoEmpty": "Keine Einträge",
                "infoPostFix": "",
                "infoFiltered": " - gefiltert aus insgesamt _MAX_ Einträgen",
                "loadingRecords": "Bitte warten Sie - Daten werden geladen ...",
                "lengthMenu": "Anzeigen von _MENU_ Einträgen",
                "paginate": {
                    "first": "Erste",
                    "last": "Letzte",
                    "next": "Nächste",
                    "previous": "Zurück"
                },
                "processing": "Verarbeitung läuft ...",
                "search": "Suche:",
                "searchPlaceholder": "Suchbegriff",
                "zeroRecords": "Keine Daten! Bitte ändern Sie Ihren Suchbegriff.",
                "emptyTable": "Keine Daten vorhanden",
                "aria": {
                    "sortAscending":  ": aktivieren, um Spalte aufsteigend zu sortieren",
                    "sortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
                },
                //only works for built-in buttons, not for custom buttons
                "buttons": {
                    "create": "Neu",
                    "edit": "Ändern",
                    "remove": "Löschen",
                    "copy": "Kopieren",
                    "csv": "CSV-Datei",
                    "excel": "Excel-Tabelle",
                    "pdf": "PDF-Dokument",
                    "print": "Drucken",
                    "colvis": "Spalten Auswahl",
                    "collection": "Auswahl"
                },
                select: {
                    rows: {
                        _: '%d Zeilen ausgewählt',
                        0: 'Zeile anklicken um auszuwählen',
                        1: 'Eine Zeile ausgewählt'
                    }
                }
            }
        } );
    }
    //custom button added with language specific label
    $.fn.dataTable.ext.buttons.showAll = {
        text: showAllLabel,
        className: 'btn-showall-color hidden'
    };

Everything works except for

"decimal": ",",
"thousands": ".",

The mySql database field is defined as DECIMAL(15,2). A value of e.g. 60000 is shown in datatables as 60000.00 (as it is in a mySql workbench query). So the thousands point is missing and the decimal point is not converted to a decimal comma!
Any solution for this?

↧
↧

Complex headers compatibility issues

February 8, 2017, 9:03 am
$
0
0

Hi All,

I'm using version 1.10.13 and am having some compatibility issues over column header alignment with horizontal scrolling enabled.

When I'm using Complex headers (rowspan and colspan) without nowrap style, my table is rendered correctly in FF and Chrome. But using in IE11 I get an alignment issue.

Here's my jsfiddle showing the problem:
https://jsfiddle.net/Redburn/k33bu0tc/

Please, help me to catchout my work.

↧

Newline and break tag in textarea.

February 8, 2017, 9:06 am
$
0
0

Example link.
The CR and LF seem not working in textarea (i.e. not converted to <br> tag). I would appreciate any ideas. Thank you in advance.

↧

Why does my search does not work ?

February 8, 2017, 9:17 am
$
0
0

Hi,
My datatable is filled by a JSon source returned by an Ajax request (server side processing).
I add a input type text to search among values of a column but it does not work...
Here is how my datatable is initialised in my .jsp page :smile:

        $('#table_events').DataTable({
                serverSide: true,
                processing: true,
                ordering: false,
                paging: true,
                scrollY: '75vh', // vh unit is a percentage of the browser window height
                deferRender: true,
                scrollCollapse: true,
                searching: true,
                //stateSave: true,   // Keeps scroller position in case of page reloading
                ajax: {
                    url: "/elogs/proposalEvents/reloadData",
                    type: "GET"
                },
                scroller: {
                    loadingIndicator: true,
                    serverWait: 250,
                    displayBuffer: 25,
                    boundaryScale: 0.75
                },
                language: {
                    loadingRecords: "Please wait : loading data...",
                    processing: "Please wait : loading data..."
                },
                "aoColumns": [{"sType":"string"}],
                "aoColumnDefs": [
                                       {"bVisible": false, "aTargets": [3], "searchable": true},
                                       {"bVisible": false, "aTargets": [4], "searchable": false}
                                    ]
        });

My input type text is :

<input type="text" id="search-input-text">

And the code to trigger the search is :

    var table = $('#table_events').DataTable();

$('#search-input-text').on('keyup', function () {
             var family =$(this).val();  // getting search input value
             table.columns(3).search(this.value).draw();
});

Thanks in advance for your help !

↧
↧

How to manually work with inline editing

February 8, 2017, 8:24 am
$
0
0

Hello,

I've been trying to implement inline editing to our datatables (using the trial, to try it out).

The client sided version is ready, but we want to do the server sided handling ourselves.

However, I'm very confused on how to send the data back to the client.

This is my current code:

var editor = new $.fn.dataTable.Editor(
    {
        ajax: '/api.php',
        table: '#table',
        fields: [
            {
                'name': 'column1',
                'label': 'Column 1'
            },
            {
                'name': 'column2',
                'label': 'Column 2'
            }
        ],
        idSrc:  'ID'
    }
);

$('#table').on('click', 'tbody td:not(:first-child)', function(e) {
    try {
        editor.inline( this, {
            submitOnBlur: true,
            submit: 'changed'
        } );
    } catch(e) {
        console.log(e);
    }
});

It sends the data fine and we're able to read it, work with it and stuff. But then I send the data back like this:

{
    "data": {
        DT_RowId: 99,
        ID: 99,
        column1: 'value',
        column2: 'value'
    }
}

after I send this data, the row just disappears on me in the DataTables (Not in the data). When I refresh the page the data returns to me like normal.

I'm not sure what DT_RowId is, I've been looking in the documentation on how the client should receive the data, and they all showed DT_RowId even though the javascript didn't show any DT_RowId column, so I thought it was needed. but it doesn't do anything for me.

↧

How idSRC works

February 6, 2017, 12:20 pm
$
0
0

Hi Support,
I have slno unique key auto increment mysql table field.
I want to update row using editor using slno but do not want to display slno in table . can i use idSRC for this purpose or any other way to do this.

Regards.
Sunil

↧

Unable to remember checkboxes across pages

August 12, 2016, 7:25 am
$
0
0

Hi all - I've been searching for an answer for this problem, and I've come across a lot of solutions, but I'm unable to get anything to work properly. I have a table that spans multiple paginated pages in DataTables - the first column is checkboxes, all of which have a unique value. What I need to do is submit a form that will send the values of those checked boxes in an array.

The problem I'm running into is that I can't get the values of any checkboxes beyond the first page to submit. From what I understand this is due to DataTables removing rows that aren't visible. I've tried the solution from here:stackoverflow.com/questions/33240409/how-to-submit-checkboxes-from-all-pages-with-jquery-datatables, but it didn't work. I also tried to get the .row.nodes() solution to work, but was unable.

Just for the sake of testing, I had this:

 $(document).on('submit','selection', function(e){
            var ads = [];

            // Iterate over all checkboxes in the table
            table.$('input[type="checkbox"]').each(function(){
                // If checkbox doesn't exist in DOM
                if(!$.contains(document, this)){
                    // If checkbox is checked
                    if(this.checked){
                        ads.push(($(this).val(this.value)));
                        console.log(ads);
                    }
                }
            });
        });

Is anyone able to provide some assistance on this? Thanks!

↧
Search

PDF Export Styles

February 8, 2017, 9:30 am
$
0
0

I want to style the exported pdf. in the console.log(doc) I see some styled named tabelHeader,...
Is it possible to change these settings?
I tried with

                    customize: function(doc){
                        styles: {
                            tableHeader:{
                                fillColor:"#F0F8FF"
                            }
                        }

But this did not work.

Andreas

↧
↧

Conditionally Change Style of Column/Row/Field

February 8, 2017, 9:20 am
$
0
0

debug - https://debug.datatables.net/ififum

I am sure this has been asked, I just can't seem to find an answer. I have a Column called "Ansible Role." The returned valued from the database will either be "Completed", "In Progress", "Incomplete", or "NULL". I would like to style the value differently for each of them - say green for completed, yellow for In Progress, red for Incomplete, etc. How would I go about doing that?

What If I wanted to color the entire row for "Completed" green, etc. ? What if I wanted to color the entire row green, but not display the column?

I definitely want to do more than just color some words or rows, but I thought this was the simplest way to get to a starting point for other use cases.

thanks

↧

Fixed column vanishes when hide the other column

February 8, 2017, 10:18 am
$
0
0

I have 13 columns so tables is with a scroll bar, I have set scrollx: true. When I hide 3 columns, fixed column goes away instead of it there is white space in whole column and data of fixed column is replicated in column beside it.
I have used below code to hide columns.

var table = $('#example').DataTable();

table.columns( [ 1, 3,8 ] ).visible( false, false );
table.columns.adjust().draw( false );

↧

make row bold given a cell value

February 8, 2017, 10:22 am
$
0
0

Hi,

I'm looking for a way to make the last row in my datatable bold (for each cell). My table is populated through JSON data.

I tried the following code but this doesn't work:

        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            /* All cells in 4th row will be bolded  */
            if ( iDisplayIndex == 3 ) {
                $('td', nRow).each(function(){
                               $(this).html( '<td><b>'+$(this).text()+'</b><td>' );
                            });
            }
            return nRow;
        },

Any thoughts?

Bart

↧

Recalculate a column after search input

February 8, 2017, 10:49 am
$
0
0

Ok here is what I am trying to achieve...

Basically after you search for something and the results filter out, I need a column's value to change based on a formula. The grand total works fine and updates as the results change, but how can I do similar with a column that has its values calculated based off another column?

↧
↧

FixedButtons... (or how to keep buttons from scrolling)?

February 8, 2017, 10:51 am
$
0
0

I've just started with datatables and while I have integrated FixedHeaders and can get that to work, I was wondering if there is anyway to also keep the buttons from scrolling as well (i.e. keep them with the fixed header).
Thx

↧

How to set programmatically the "searchable" parameter for columns

February 8, 2017, 10:57 am
$
0
0

It seems that since 2014 the situation with the ability to set programmatically the "searchable" parameter for columns has not beent changed. And it's sad, because this parameter is passed to the server when request via ajax. For example, checkboxes may be set for global search on selected columns. Is it possible?

↧
Search

Wheneer i try to use echo or print_f it gives some error

February 8, 2017, 11:25 am
$
0
0

Wheneer i try to use echo or print_f it gives some errors why it is so can not i use these to see the array data by using exiit() as we normally do in php or codeigniter ?

Please reply i have just start using Data Tables

↧

How to toggle detail-control button

February 7, 2017, 12:53 pm
$
0
0

My question is related to this question: https://datatables.net/forums/discussion/40482

Specifically, I am using the following code to hide the child details when a user navigates away from the page:

        window.addEventListener("pagehide", function(e) {
            $( "tr" ).each(function() {
                var tr = $(this).closest('tr');
                var row = table.row(tr);
                if (row.child.isShown()) {
                    tr.removeClass( 'details' );
                    row.child.hide();
                };
            });
        });

My problem is that when I click the back button, the child row is hidden like I want, but the details button is still red with the minus sign. How can I toggle just the details button back to green after hiding the child? My details button is not in a separate column, but appears in whichever is the left most column. Basically I want to revert the table back to its original state upon navigating away. This is normal behavior in desktop browsers, but in mobile browsers the details remain open and appear when the user hits the back button, so I want to hide the child though my function above on pagehide and reset the details button from red back to green. Can someone help with the last part? Thanks!

↧
↧

How to get row data using a search.

February 8, 2017, 11:45 am
$
0
0

I can use onclick to capture the data as follows:
usertable.row(this).data();

Is there a way to get the data of a row by supplying DT_rowId or a UserID in the current table?

for example can i do something similar to usertable.row("DT_rowId == 100").data() or some other similar method?

Also can I get the data of the currently selected row?

What I have been resorting to, is saving "this" and passing it to the methods..

Thanks

↧

How can i add dynamic field datatables editor ?

February 7, 2017, 9:33 am
↧

Custom template Form Editor

February 8, 2017, 12:21 pm
↧
Viewing all 81386 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>