Quantcast
Channel: Buttons — DataTables forums
Viewing all 478 articles
Browse latest View live

Issue with delete button when using combined primary key

$
0
0

Hi, I guess this will be just something I am missing, so here is the code I have and is not working.... Very same example when using this code without aliases and multiple tables is working. I had 1 table which used alias as well (no joins), once I removed the alias from everywhere the delete works afterwards. The debug information is completely empty {"data":[],"debugSql":[]}

editor3 = new $.fn.dataTable.Editor( {
        ajax: "_content/datatables/dt_email_groups_assign.php",
        table: "#emailsgroups",
        fields: [  {
                label: "Email:",
                name: "eg.emailaddress_id",
                type:"select"
            }, {
                label: "Group:",
                name: "eg.emailgroup_id",
                type:"select"
            }
        ]
    } );
    table3 = $('#emailsgroups').DataTable( {
        dom: "Bfrtip",
        ajax: "_content/datatables/dt_email_groups_assign.php",
        columns: [
            { data: "e.address" },
            { data: "g.name" }
        ],
        select: true,
        buttons: [
            { extend: "create",   editor: editor3 },
            { extend: "edit",   editor: editor3 },
            { extend: "remove",   editor: editor3 }
        ],
    } );

PHP part below


// Alias Editor classes so they are easy to use use DataTables\Editor, DataTables\Editor\Field, DataTables\Editor\Format, DataTables\Editor\Mjoin, DataTables\Editor\Options, DataTables\Editor\Upload, DataTables\Editor\Validate; // Build our Editor instance and process the data coming from _POST Editor::inst( $db, 'fmsmon.mon_emails_cfg'.$_SESSION['dblink'].' eg', array('eg.emailgroup_id', 'eg.emailaddress_id')) ->fields( Field::inst( 'eg.emailaddress_id' ) ->options( Options::inst() ->table( 'fmsmon.mon_emailaddresses_cfg'.$_SESSION['dblink'].' e' ) ->value( 'id' ) ->label( 'address' ) ), Field::inst( 'e.address' ), Field::inst( 'eg.emailgroup_id' ) ->options( Options::inst() ->table( 'fmsmon.mon_emailgroups_cfg'.$_SESSION['dblink'].' g' ) ->value( 'id' ) ->label( 'name' ) ), Field::inst( 'g.name' ) ) ->leftJoin( 'fmsmon.mon_emailaddresses_cfg'.$_SESSION['dblink'].' e', 'e.id', '=', 'eg.emailaddress_id' ) ->leftJoin( 'fmsmon.mon_emailgroups_cfg'.$_SESSION['dblink'].' g', 'g.id', '=', 'eg.emailgroup_id' ) ->debug( true ) ->process( $_POST ) ->json();

Everything else works perfect. Of course I did not include the entire code like session_start etc.

Thanks
Marek


Button "columnToggle" - show processing while working?

$
0
0

I'm using a button that extends "columnToggle" and when you click on the button (that will end up toggling the visibility on a set of 5 columns), it takes a few seconds for the columns to be shown/hide. Is there a way to put a spinner or processing message on the screen during that few second lag time? Like maybe a way to extend the action and make custom calls before and after the columnToggle action itself?

How to print all records when serverSide is true

$
0
0

I understand that when setting serverSide: true, you can only print what you see in the table.

Is there a way to configure the print button so that you can print all records, and not only the ones seen that moment in the table?

As a workaround, I suppose I could disable scroller (going back to paging) and add a "select all" option. But I'm hoping I could keep Scroller enabled and be able to print all records. Is this possible?

[...code...],
serverSide: true,
scrollX: true,
scrollY: 300,
deferRender: true,
scrollCollapse: true,
scroller:true,
buttons: [
{ extend: "edit", text:'Edit selected row' ,editor: editor },
{ extend: "colvis", text:'Select Visible Columns' },
{
    extend: 'print',
    autoPrint: true,
    exportOptions: {
        columns: ':visible'
    }
}
],
[...code...]

How to apply inline css style to custom button

$
0
0

I've looked at the Buttons page for hints about styling a button via inline style.

If I have something like this, how can I tell the button what background and foreground color to use? One request I get from some of my users is to make a button this or that color because they associate something with a color more often than text.

This is what I have, and I figure I'd put the style declaration here. Just in case it actually worked, I tried backgroundColor: "#033C73". No such luck. No errors, but no luck.

Is there a way to do this?

buttons: [
    {
        text: 'Add new student',
        action: function() {
            location.href = '@Url.Action("Create", "MiaRoster1")';
        }
                // set background color to "#033C73" and text color to "#FFFFFF"

    }
    /* more buttons*/
]

Buttons disappear when language url is loaded instead of code

$
0
0

Hi,

When initializing datatables I use language : <json stuff>
However, if I set url : <file.json> (with same contents, in this case Swedish.json downloaded from datatables.net) then the buttons disappear.

Check out debug code ovelax

Best regards,
Mats

{
"sEmptyTable": "Tabellen innehåller ingen data",
"sInfo": "Visar START till END av totalt TOTAL rader",
"sInfoEmpty": "Visar 0 till 0 av totalt 0 rader",
"sInfoFiltered": "(filtrerade från totalt MAX rader)",
"sInfoPostFix": "",
"sInfoThousands": " ",
"sLengthMenu": "Visa MENU rader",
"sLoadingRecords": "Laddar...",
"sProcessing": "Bearbetar...",
"sSearch": "Sök:",
"sZeroRecords": "Hittade inga matchande resultat",
"oPaginate": {
"sFirst": "Första",
"sLast": "Sista",
"sNext": "Nästa",
"sPrevious": "Föregående"
},
"oAria": {
"sSortAscending": ": aktivera för att sortera kolumnen i stigande ordning",
"sSortDescending": ": aktivera för att sortera kolumnen i fallande ordning"
}
}

Set particular colvisGroup button as default on first page load

$
0
0

In my scenario, I have a set of colvisGroup buttons that work as intended when you click any of the buttons.

By default, my table shows all columns. Is there a way I could set a particular colvis button to be loaded by default?

These are my button definitions in the configuration section, where the show and hide definitions are supplied by variables. This table has 50 columns, which is why you're not seeing the definitions inline.

Is there a configuration property I can set so that a particular button, say Student is selected on first page load?

$('#example').DataTable({
    dom: "Blfrtip",
    ajax: { /* ... code ... */ },
    serverSide: true,
    stateSave: true,
    buttons: [
        {
            extend: 'collection',
            text: 'Column Visibility',
            buttons: [
                {
                    extend: 'colvisGroup',
                    text: 'All',
                    show: allShow,
                    hide: allHide
                },
                {
                    extend: 'colvisGroup',
                    text: 'Student',
                    show: studentColsShow,
                    hide: studentColsHide
                }
                /* ... more buttons */

            ]
        }
    /* ...  more code ... */
    });

How can I output initial dataset in an export csv ?

$
0
0

Hi there,

I have a dataset which content some boolean value that visually I render with an Icon via this function :

var table = $('#table').DataTable({
"ajax": "xxxx",
"columns": [
{"data": "subscribed", "render": function(data, type, row) {return data ? '<i class="state-true fa fa-check"></i>' : '<i class="state-false fa fa-close"></i>'},

The problem is when I export to CSV => it export the rendered row.

I would like to keep the default boolean value in the CSV (so initial data without rendered data) but also keep the behavior of the export (when you filter and search etc).

How can achieve that ?

Thx !

Show Edit button on conditions

$
0
0

Hello,

Is it possible to show button based on external condition ?

buttons: [
                    {
                        extend: 'pdfHtml5',
                        className: 'btn-datatable',
                        orientation: 'landscape',
                        pageSize: 'LEGAL',
                    },
                    {
                        extend: 'print',
                        className: 'btn-datatable',
                        text : 'Imprimer',
                        orientation: 'landscape',
                        pageSize: 'LEGAL',
                    },
                    {
                        extend: 'excel',
                        className: 'btn-datatable',
                    },
                    {
                        extend: 'colvis',
                        collectionLayout: 'two-column',
                        text : 'Colonne Visible',
                        className: 'btn-datatable',
                    },
                    {
                        extend: 'edit',
                        editor: editor,
                    },


                ],

I'd like to show the "Edit" button if the user has certain right.

Thanks !

Pauline.


How to test the output of excelHtml5 buttons?

$
0
0

Hello,

I would like to test the output of excelHtml5 buttons, i.e. compare the returned xlsx file data to a known good file.

The only solution that I'm aware of is using Selenium with the Firefox driver configured so that it saves downloads without asking the user in a predetermined directory, then compare the downloaded and the known-good file.

I was wondering though if there is a simpler, more straightforward method to run such tests?

(Just speculating: For example, can the data just be added somewhere to the DOM, so that it would be available to the webdriver for read acces?)

Best regards,
Carsten

Bug in title vs. filename in excelHtml5 button?

$
0
0

Hello,

when I initialize a button like this:

var Tabelle = $('#HauptTabelle').DataTable(
    {
        buttons: [
            {
                extend: 'excelHtml5',
            },
        ],
    }
);

with version 1.4.2, the title of the HTML document is used both as the filename of the downloaded file and as the first line in the generated xlsx file.

However, this breaks backwards-compatibility with pre-1.4.0 versions. What I would like to have is:

var Tabelle = $('#HauptTabelle').DataTable(
    {
        buttons: [
            {
                extend: 'excelHtml5',
                filename: '*',
                title: null,
            },
        ],
    }
);

The problem is, that with or without the line filename: '*',, the filename of the downloaded document is "download" rather than the HTML document's title.

A bug?

excelHtml5: How to export checkbox data

$
0
0

In this scenario, I have a table with checkboxes, like this.

However, when exporting to Excel, I see blank cells like this.

How do i need to configure the button so that true/false columns do not appear as blanks? I read Buttons for DataTables but did not see any cases for treatment of checkboxes or boolean fields.

This is the code I have so far. In this scenario, let's say that only columns 1 and 2 are checkboxes. What would I need to add?

$(() => {
            $(".display").DataTable({
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    exportOptions: {
                        columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
                    }
                }]
            });
        });

ExcelHtml5 export - setting title to null causes Excel to repair file

$
0
0

Hi,

I'm facing an issue with the Excel export that causes Excel to repair the file.

In my Excel, I don't want the title line to appear.

I use the following setting for my button:

 buttons: ['copyHtml5', {
            extend: 'excelHtml5',
            text: 'Sauver en tant que fichier Excel',
            filename: function() {
                var date_edition = moment().format("YYYY-MM-DD HH[h]mm")
                var selected_machine_name = $("#output_select_machine select option:selected").text()
                return date_edition + ' - ' + selected_machine_name
            },
            sheetName: 'Output logiciel complet',
            title : null
        }]

If I set title to another value (a string for example), it works fine.

Thanks,

Sébastien

Excel export : set line height

$
0
0

Hi,

I'm looking for a way to customize a specific line height with the Excel export button.

I looked through the forum and the Buttons' code hopping to find parts of code relative to the Built in styles to figure out a solution but I couldn't find them.

Any advices for a solution (or a reference in the code I can have a look at) are very welcomed !

Sébastien

delete event trigger

$
0
0

hello alan,

i am looking for delete record event in datatable ..

i need to validate count of it and i need to prevent that when delete button clicks

but delete event is not working for click event...

for example

i have table-1 which as record 2

for the table-1 record with each individual record i have set dependency click event to populate with another table -2 to populate record... so i need to validate table-1 delete event to check record count of table-2 and then allow user to delete ..

please help me out to prevent click event fire in delete record

regards
karthik.r

Broken page after adding buttons to my table (JQuery.extend falls in a infinite recursion)

$
0
0

So my app is all happy, and this datatable is pretty nice and its editor works create, with bubbles.
Then I add the "require" to get datatable-select and datatable-buttons, and everything is ok.
Then finally I add "buttons: [ {extend: 'create', editor: simpleEditor} ] " to the definition of my datatable.

For some reason, in its initialization, the datatable-buttons module seem to use jQuery.extend on a data-structure that may be referring to itself (or a part of itself), which sends jQuery.extend into an infinite recursion until :smile:

Uncaught RangeError: Maximum call stack size exceeded
...

simpleEditor is built with new $.fn.dataTable.Editor( { ... } ).
and the buttons: [ {extend: 'create', editor: simpleEditor}] refers to it - so perhaps there is a weird self-reference loop happening.

but this seems to be exactly like every other datatable with button...

So, I am at a loss...

Has anyone encountered such conditions and found the root cause and fixed it?
I've upgraded to jQuery 1.12.4, latest datatable-select and datatable-buttons. I haven't upgraded Editor in a little more than a year.

thank you!


PDF export button spinner not stopping?

$
0
0

Was using the standard HTML5 export extension and noticed my PDF button didn't stop spinning after completion. Tried the online example https://editor.datatables.net/examples/extensions/exportButtons.html and noticed the same behavior. Tried with Firefox v57, Chrome v63 and Edge v25 with same results in all. Everything functions exactly as it should and produces the correct result, spinner just never stops?

csvhtml5 exportoptions format body

$
0
0

Hello,

Looking to format one of my columns that I am exporting to a csv.

Cannot find a good example

I tried the following ... how do I format column 15 ... i tried just foobar but does not come through

Thanks,
Evan

    {extend: 'csvHtml5', text:'CSV', className:'btn-link',
     filename: 'my export ' ,
         exportOptions: {
     columns: [ ':visible' ],
     format: {
                 body: function ( data, row, column, node ) {
         return column == 15 ?
                         'foobar':
                         data;
                 }
     }
         }},

I am using
* https://datatables.net/download/#bs-3.3.7/jq-3.2.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/e-1.6.5/af-2.2.2/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/kt-2.3.2/r-2.2.0/rg-1.0.2/rr-1.2.3/sc-1.4.3/sl-1.2.3
*
* Included libraries:
* Bootstrap 3 3.3.7, jQuery 3 3.2.1, JSZip 2.5.0, pdfmake 0.1.32, DataTables 1.10.16, Editor 1.6.5, AutoFill 2.2.2, Buttons 1.4.2, Column visibility 1.4.2, Flash export 1.4.2, HTML5 export 1.4.2, Print view 1.4.2, ColReorder 1.4.1, FixedColumns 3.2.3, FixedHeader 3.1.3, KeyTable 2.3.2, Responsive 2.2.0, RowGroup 1.0.2, RowReorder 1.2.3, Scroller 1.4.3, Select 1.2.3

Disable Edit, or read only row

$
0
0

I have the need to either disable the edit button. I have been successful with the js to select this data however it seems that the underlying scripts prevent this enable/disable from operating as expected for example via:
table.button( 1 ).enable( data === 1 );

Is there a means that I am over looking to make this function as intended? Alternatively, another option would be to mark a row as read only, is this a possibility?

custom print page

$
0
0

Hi, I want align the table RTL in the print page, by adding this code to the style
style="direction: rtl"
How can I do that ?


and this is my print button Code

{ extend: 'print',text: '<i class="fa fa-plus" aria-hidden="true"><span class="{{ App::isLocale('ar')? 'font-ar' : '' }}">@lang('master.print')</span></i>',
                        title: '@lang('invoices.products')',
                        messageTop: '{{ Auth::user()->office_name }}',
                        className: 'btn btn-default',
                        autoPrint: true,

                        customize: function (win) {
                            $(win.document.body).find('th').addClass('display').css('text-align', 'center');
                            $(win.document.body).find('table').addClass('display').css('font-size', '16px');
                            $(win.document.body).find('table').addClass('display').css('text-align', 'center');
                            $(win.document.body).find('tr:nth-child(odd) td').each(function (index) {
                                $(this).css('background-color', '#D0D0D0');
                            });
                            $(win.document.body).find('h1').css('text-align', 'center');

                        }}

Is there any way to assign an id to a button?

$
0
0

I saw a reference to attr: { id: 'buttonID' } but it doesn't seem to work. Thanks. -Gabe

Viewing all 478 articles
Browse latest View live


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