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

Row grouping with printing

0
0

I believe i solved the problem with printing with row grouping. I found a snippet of code on StackOverflow here and was able to fix it up to work with row grouping. This is placed in datatable-buttons.js on line 1564.

Heres some images of it working!
http://prntscr.com/fhx1vu
http://prntscr.com/fhx1ia

    var _exportData = function ( dt, inOpts )
    {

        var config = $.extend( true, {}, {
            rows:           null,
            columns:        '',
            grouped_array_index: [],
            modifier:       {
                search: 'applied',
                order:  'applied'
            },
            orthogonal:     'display',
            stripHtml:      true,
            stripNewlines:  true,
            decodeEntities: true,
            trim:           true,
            format:         {
                header: function ( d ) {
                    return strip( d );
                },
                footer: function ( d ) {
                    return strip( d );
                },
                body: function ( d ) {
                    return strip( d );
                }
            }

        }, inOpts );

        var strip = function ( str ) {
            if ( typeof str !== 'string' ) {
                return str;
            }

            // Always remove script tags
            str = str.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );

            if ( config.stripHtml ) {
                str = str.replace( /<[^>]*>/g, '' );
            }

            if ( config.trim ) {
                str = str.replace( /^\s+|\s+$/g, '' );
            }

            if ( config.stripNewlines ) {
                str = str.replace( /\n/g, ' ' );
            }

            if ( config.decodeEntities ) {
                _exportTextarea.innerHTML = str;
                str = _exportTextarea.value;
            }

            return str;
        };


        var header = dt.columns( config.columns ).indexes().map( function (idx) {
            var el = dt.column( idx ).header();
            return config.format.header( el.innerHTML, idx, el );
        } ).toArray();

        var footer = dt.table().footer() ?
            dt.columns( config.columns ).indexes().map( function (idx) {
                var el = dt.column( idx ).footer();
                return config.format.footer( el ? el.innerHTML : '', idx, el );
            } ).toArray() :
            null;

        var rowIndexes = dt.rows( config.rows, config.modifier ).indexes().toArray();
        var selectedCells = dt.cells( rowIndexes, config.columns );
        var cells = selectedCells
            .render( config.orthogonal )
            .toArray();
        var cellNodes = selectedCells
            .nodes()
            .toArray();

        var grouped_array_index     = config.grouped_array_index;                     //customised
        var no_of_columns           = header.length;
        var no_of_rows              = no_of_columns > 0 ? cells.length / no_of_columns : 0;
        var body                    = new Array( no_of_rows );
        var body_data               = new Array( no_of_rows );                                //customised
        var body_with_nodes         = new Array( no_of_rows );                          //customised
        var body_with_nodes_static  = new Array( no_of_rows );                          //customised
        var cellCounter             = 0;

        for (var i = 0, ien = no_of_rows; i < ien; i++)
        {
            var rows            = new Array( no_of_columns );
            var rows_with_nodes = new Array( no_of_columns );

            for ( var j=0 ; j<no_of_columns ; j++ )
            {
                rows[j]             = config.format.body( cells[ cellCounter ], i, j, cellNodes[ cellCounter ] );
                rows_with_nodes[j]  = config.format.body( cellNodes[ cellCounter ], i, j, cells[ cellCounter ] ).outerHTML;
                cellCounter++;
            }

            body[i]                     = rows;
            body_data[i]                = rows;
            body_with_nodes[i]          = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
            body_with_nodes_static[i]   = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
        }

        /******************************************** GROUP DATA *****************************************************/
        var row_array                       = dt.rows().nodes();
        var row_data_array                  = dt.rows().data();
        var iColspan                        = no_of_columns;
        var sLastGroup                      = "";
        var inner_html                      = '',
            grouped_index;
        var individual_group_array          = [],
            sub_group_array                 = [],
            total_group_array               = [];
        var no_of_splices                   = 0;  //to keep track of no of element insertion into the array as index changes after splicing one element

        for (var i = 0, row_length = body_with_nodes.length; i < row_length; i++)
        {
            sub_group_array[i]              = [];
            individual_group_array[i]       = [];

            var sGroup                      = '';

            for(var k = 0; k < grouped_array_index.length; k++)
            {
                sGroup                          = row_data_array[i][grouped_array_index[k]];
                inner_html                      = row_data_array[i][grouped_array_index[k]];
                grouped_index                   = k;
                individual_group_array[i][k]    = row_data_array[i][grouped_array_index[k]];
                sub_group_array[i][k]           = sGroup;
            }

            total_group_array[i] = sGroup;


            console.log("grouped_index",grouped_index);

            if ( sGroup !== sLastGroup )
            {
                var table_data              = [];
                var table_data_with_node    = '';

                for(var $column_index = 0;$column_index < iColspan;$column_index++)
                {
                    if($column_index === 0)
                    {
                        table_data_with_node        += '<td style="border-left:none;border-right:none">'+inner_html+'</td>';
                        table_data[$column_index]   = inner_html + " ";
                    }
                    else
                    {
                        table_data_with_node        += '<td style="border-left:none;border-right:none"></td>';
                        table_data[$column_index]   = '';
                    }
                }

                body_with_nodes.splice(i + no_of_splices, 0, $.parseHTML('<tr class="group group_'+grouped_index+' grouped-array-index_'+grouped_array_index[grouped_index]+'">'+table_data_with_node+'</tr>'));
                body_data.splice(i + no_of_splices, 0, table_data);
                no_of_splices++;
                sLastGroup = sGroup;
            }
        }

        return {
            header: header,
            footer: footer,
            body:   body_data
        };
    };

Usage:
Define grouped_array_index in exportOptions

 exportOptions: {
        // Any other settings used
        grouped_array_index: [<place row to use here>],
 },

Ordering numerical column in non-numerical order

0
0

Please forgive the odd title on this one - it's an odd requirement all around.

So, I've got someone with a bunch of numerical identifiers that represent various organisational units. They're hierarchical, like so (only the numbers are used, the names are just for your information):

387 - Parent Division 1
3871 - Sub Division
38711 - Area 1
387111 - A1 Team 1
387112 - A1 Team 2
38712 - Area 2
387121 - A2 Team 1
456 - Parent Division 2
4561 - Sub Division
45611 - Area 2
...

And so on. Some of the numbers go quite deep, 7 or 8 long. Not how I would have set up the identifiers, but that was decided long before I came on the scene, and they aren't going to change now.

Obviously, DataTables' inbuilt sorting displays the units out of order. All the Parent Divisions first, then all the sub divisions, then areas etc. Equally obviously, this isn't what the users want. Alternatives like padding the identifiers with 0s have been rejected. They must be in order, and they must display exactly as is. I could probably cobble together some kind of monstorous CTE that gives me a giant sort string, but as soon as they order on another column, that initial order is gone and can't be retrieved. Cue much wailing and gnashing of teeth.

Is there a simple (or even not-simple) way to order a bunch of numbers like I've laid out above so that it can be done on load, and renewed when the user clicks the Unit Code column after sorting on something else? It's kind of hard to describe the actual sorting process that has to happen - hopefully the example is clear enough.

How can i do an editor form on two tables?

0
0

Hello everybody.
I have 2 tables T1 and t2 linked by a join (foreign key from T1.t2_id to t2.id). I created 2 editor forms for ech tables. In the T1 editor form i have a select type field for selecting a t2 id.
But I wish I could create a new t2 id from the T1 editor form if in the select the t2 id is not present.
How i do something like that. Is it possible to call and insert the t2 editor form inside the T1 editor form?
how would you do this ?
Thanks for your help and have a nice day
Lionel

How to set css or background color of row on hover

0
0

I am trying to add the style on table row hover but it is not applied. Please suggest what is wrong with this code:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />

function BuildDatatable()
{
$.ajax({
type: "POST",
url: "Handlers/DatatableHandler.ashx",
data: {operationType: 'Columns' },
success: function (data) {
result = JSON.parse(data);
$('#tblEmployee').DataTable({
processing: true,
serverSide: true,
responsive: true,
searching: false,
lengthChange: false,
order: [[defaultSortColumnIndex, 'desc']],
pageLength: 10,
ajax: {
"url": "Handlers/DatatableHandler.ashx",
"postData": { operationType: 'edata' },
"type": "POST",
"datatype": "json"
},

                    columns: result,
                    columnDefs: [
                        {
                            targets: 0,
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return '<input type="checkbox" class="editor-active">';
                                }
                                return data;
                            }
                        }
                    ]

                });
            }              
        });

}

This above code works fine but when I write this:

$(document).ready(function() {
var table = $('#tblEmployee').DataTable();

$('#tblEmployee tbody').on( 'hover', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
} );

});

The table does not render and it shows error 'Cannot read property 'aDataSort' of undefined'. Please note that I already have on click and on double click events also.

I want to add the css or background color of the row on hover, please advise.

Datatables won't work on my real data

0
0

When I used dummy data, the program run smoothly, but when I used my real data which consist of 500 thousand rows it won't work. Is there any limitation in datatables that I should know of?

select2 dependencies...

0
0

I trying to get my head around the dependent method and setting a value for a select2-field. I have a field defined like this:

{
                    "label": "TPM",
                    "name": "TPM",
                    "type": "select2",
                    opts: {
                        //def: 'BR',
                        ajax: {
                            dataType: "json",
                            url: '/Registraties/getMethodes',
                            data: function (params) {
                                var query = {
                                    tyb: editor.val('TYB'),
                                }
                                return query; 
                            },
                            processResults: function (data) {
                                return {
                                    results: data
                                };
                            }
                        }
                    }
                }

This gets its data using an ajax call and passes the contents of the TYB-field to the request. Works fine.
Then I have a dependency defined like this:

        editor.dependent('TYB', function (val, data, callback) {
            $.ajax({
                
                url: '/Registraties/TypeBehandelingUpdated',
                type: 'post',
                dataType: 'json',
                data: { 
                    "TYB": val,
                    "PRODUCTID": data.values.PRODUCTID, 
                    "TPS": data.values.TPS, 
                },
                success: function (json) {
                    callback(json); // callback naar de editor zodat die de velden kan bijwerken
                }
            });

        });

So, when the TYB field is changed, I want to make some changes to the form. I do an ajax call, and on the serverside I decide which fields I need to enable or disable, and if I want to set a value for something. This returns something like the following:

{  
   "show":[  
      "TPM",
      "HPG",
   ],
   "hide":[  
      "BWL",
   ],
   "values":{  
      "TPM":"BR",
   },
   "labels":{  
      "HVH":"Hoeveelheid:"
   }
}

The problem here is the value for the TPM field. In the network-tab in the debugging console I see a call "http://localhost:53686/Registraties/getMethodes?initialValue=true&value=%22BR%22", and the result is: "{"id": "BR", "text": "BRANDEN" }". Looks good to me, but the TPM field stays empty.
Btw: when I try to set a default value for that field with the option " def: 'BR' ", then I see the same ajax call and then the field is set correctly.

I have a .Net background, and I try to get my head around all this jquery-magic, but this is too complicated for me. If anyone with some more experience would like to help me figure this out, that would be greatly appreciated! :-)

No Data available in table failing to show on no data.

0
0

Sometimes my API will return back an error of no user being returned. {"error":"No found users | CODE: XXX-XXX"}
Data Tables is able to show the error message in a alert, however it doesn't update the table to say "No Data available in table" until it's updated in some way (Next page, changing sorting, ETC)

Is there something I can change to allow for it to reload the table correctly to show the "No data available in table" after/before the alert is confirmed.

Problem with the line break

0
0

Good morning
In Datatable by default, the text that we write in a text with paragraph breaks, is shown in the table continuously. In the Database, PhpMyAdmin is written correctly, but there is no problem with the editor. There is a way to change this property and to show it as it is written.
In the example:
This is an example.
Second line.
Third line
Appears
This is an example. Second line. Third line
Thank you


how to display chid of chid data

0
0

here we use row click on row we display child row . than how to display child of child in datatable. that menad i wnat click on full name it also display child row row how to implement this

Discover additional Ok

0
0

The adorable four-year-outdated was caught ranking her aunts in Kim Kardashian ’s Snapchat video on Friday, March three. In the cute clip, a shy "P" can be witnessed talking to her dad, Scott Disick. The answer may well nicely be thanks to Kylier Jenner, at war with Blac Chyna because of King Cairo! Ray J and Kim Kardashian sex tape full video Naturally, the total ensemble features Louis Vuitton’s properly-known LV brand, making this probably the least-subtle Coachella look we’ve observed so far.

The KUWTK star left practically nothing to the imagination in the thong-fashion bikini bottoms that flashed her total bum. <a href="http://sexforsmartpeople.com/sex-tape-for-smart-Kim-Kardashian">Kim Kardashian ft Ray J sex tape full version</a> Lyrics contain: "Possibly it really is my fault for idolising n****s based off the phrases they be rappin/ But come to find out, these n****s never even write they st/ Hear some new things bubblin' up, then they bite the st." Maybach Music Group rapper Wale responded to J Cole with his own diss track titled Groundhog Day. That&aposs a complete three days away so in the mean time, can we curiosity you in these best-sellers alternatively. Kim Kardashian Ray J.
And I seriously appreciate you telling me about it, which is actually nice.” “I just had a duty to you as a buddy," Kanye admits. "Thanks for staying so amazing about it.” Swift appears to give her approval by replying "I suggest go with no matter what line you feel is far better. Spending nowadays with my relatives, thinking of these households who lost somebody 15 years ago. Kim Kardashian with Ray J real sex tape We’d run on the treadmill collectively and push every other, so I’m pleased to see he’s carrying out greater.”
Kris Jenner. 60, has been the apple of 35-year-previous Corey Gamble ‘s eye for sometime. uncut Kim Kardashian's sex tape To complete the look, Kim wore gold platform sandals that featured leaf-designed ankle straps. The teenager showed off her curves in a strapless frock with sheer prolonged sleeves.

Exhibiting off yet another attractive one particular-piece on Monday, the mum-of-three looked hotter than an ever as she relaxed underneath the sun. Supermodels are type of the factor of the past. Compounding the situation, her husband, Kanye West, 38, admitted final winter to burning by way of millions and becoming “in debt” following a failed effort to demonstrate himself as a trend designer. “They all acquired rather complacent about money when Kanye came on the scene, but turns out he’s worse with funds than they are!” Personally, this colour reminds me of Krispy Kreme glazed donuts, Get together Rings, strawberry bon bons and Hubba Bubba and would, in truth, have me wanting a lot more foods, but in accordance to science, Kendall's concept is not absolutely bonkers.

Unable to download using html5 bottons

0
0

Hi, I am using html5 buttons to download table data. Table contains around 4900 rows. It works for rows until 4670 but if it’s more than that and when I click the button it’s showing loading icon in the button and nothing happened after that. This issue is happening only in chrome browser. Any restriction on the rows in chrome? Thanks for the help.

New Create Button

0
0

Hi, I would like to add a new create button, but instead of the modal form opening, I just want a row created with the default values for each field. There are no mandatory fields in my form, so currently I can click 'New' then click submit and it will create a row, but that's obviously more long winded than it needs to be!

Disable Sort Icons for sorted columns

0
0

So I've sorted three columns in my table but when I then try to get rid of the sort icons it only gets rid of them for the columns I haven't sorted. How would I fix this? Here is the code of my function.

$('#register').DataTable( {
    "order": [[ 1, 'asc' ], [ 2, 'asc' ], [ 0, 'asc' ]],
    "columnDefs": [
      { "orderable": false, "targets": '_all'}
    ],
    'dom': 'Bfrtip',
    'buttons': [{
      extend: 'copy'
    },
    {
      extend: 'excel'
    },
    {
      extend: 'pdf',
      title: 'Oundle School Sports Database',
      download: 'open',
      customize: function (doc) {
        doc.content[1].table.widths =
        Array(doc.content[1].table.body[0].length + 1).join('*').split('');
      },
    },
    {
      extend: 'print',
      title: 'Oundle School Sports Database',
      messageTop: 'This is a list of all pupils sports options',
      footer: false,
      header: false
    }
    ]
    } );

dependent() doesn't fire for field where type="date"

Hiding/unhiding datatables with Vue - 0-width columns

0
0

I created a page with multiple DataTables that are hidden/shown via vue data variable. The initially 'shown' datatable looks fine. When you switch to the second table, showing it, the column formats are all wrong. If you change back to the originally working table, it's column widths are broken as well.

Is this even possible? Apparently I can hook into some arcane 'nextTick' vue.js API method, but no luck.

Repro fiddle:

http://jsfiddle.net/cardinal177/m7bzjsag/9/


controling table visibility via Vue.js - 0 width columns when unhiding

0
0

I have a page with 3 data tables (v1.10.19). These tables are conditionally hidden/unhidden via a vue.js model variable. These tables have 'local' javascript as the data source.

The initially visible table displays fine. But when I Click a button that changes the vue.js variable, the newly visible table has the data but the columns have 0 width. If I switch back to the first visible table (which displayed fine), it now has 0-width columns.

Is there a way to get around this behavior?

I am trying to do a 'table_name.columns.adjust().draw();' but to no avail.

Fully repeatable test case:

jsfiddle.net/cardinal177/m7bzjsag/

controling table visibility via Vue.js - 0 width columns when unhiding

0
0

I have a page with 3 data tables (v1.10.19). These tables are conditionally hidden/unhidden via a vue.js model variable. These tables have 'local' javascript as the data source.

The initially visible table displays fine. But when I Click a button that changes the vue.js variable, the newly visible table has the data but the columns have 0 width. If I switch back to the first visible table (which displayed fine), it now has 0-width columns.

Is there a way to get around this behavior?

I am trying to do a 'table_name.columns.adjust().draw();' but to no avail.

Fully repeatable test case:

jsfiddle.net/cardinal177/m7bzjsag/

Custom editor

0
0

Good afternoon
I'm trying to create a search engine to be able to select a record within a custom editor: template: '#customForm',
The field I want to filter is:
<editor-field name = "tb_palabra []. id"> </ editor-field>
I would appreciate any surgency.
A greeting.

Cannot wrap numeric data value

0
0

Hi guys

Hope you can help me. Im using the table responsive. it wraps long variable data value, but for numeric value it doest wrap. Please advise. thanks

Using Responsive >=2.x & ColVis - Show Hidden Columns In Child Row?

0
0

I found the following question and relative answer on Stack Overflow: https://stackoverflow.com/a/32993719/2110294

Which points to a previous discussion on these forums: https://datatables.net/forums/discussion/29860/using-colvis-button-with-responsive-table-disables-hidden-columns

In this we find the following example: http://live.datatables.net/poqoyezo/1/edit

In this example, when a column is hidden / shown by ColVis it is added or removed from the child row.

Bumping the dependencies to the latest versions shows that this functionality is no longer the same.

Reverting the Responsive dependency to 1.0.7 shows that it something that changed between this version and version 2 which created these changes.

Is it possible that we can recreate this behavior with version >=2.0.0 of Responsive, could anyone share an updated example of this?

Many thanks.

EDIT: Here is a test case: http://live.datatables.net/femudeda/1/edit

Viewing all 79323 articles
Browse latest View live




Latest Images