I have a table where I used the render to place some columns with currency format. So far so good, the problem is when I try to export the table data to excel, it doesn't take the data as currency. I already figured out the reason, I can't render and want to customize the currency format of export to excel. I wish I could have the currency table and be able to export to excel in currency format. I sent a picture of how I did it.

Hi
I want to have two users of my datatable, read-only users and administrators. So a user has either 0 (read-only) or 1 in var admin. The page loaded is editable, so I want to disable the buttons, that are used for create, edit, duplicate and delete. I've tried class, name and index for controlling the buttons, but it seems, that I can only controle the first of my buttons. When I select a row it seems to me, that select overrules the disabled buttons, so that button index 1, 2 and 3 gets enabled.

Has anyone got an idea to why this is?

buttons: [       
        { extend: 'create', text: 'Opret', editor: editor},
        { extend: 'edit', text: 'Rediger', editor: editor },
        { extend: "selected", text: 'Kopier',
                action: function ( e, dt, node, config ) {
                    // Start in edit mode, and then change to create
                    editor
                        .edit( table.rows( {selected: true} ).indexes(), {
                            title: 'Kopier fag',
                            buttons: 'Opret'
                        } )
                        .mode( 'create' );
                }
            },
        { extend: 'remove', text: 'Slet', editor: editor},
        { extend:'pageLength', text: 'Vis'},
        { extend: 'collection', text: 'Eksporter',
            buttons: [
                'copy',
                'excel',
                'csv',
                'pdf',
                'print'
            ]
        },
        { extend: 'colvisGroup', text: '- efterår',// koden, der skjuler efterårs ugerne
          hide: [ 11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33 ] //efterårskollonner
          },
        { extend: 'colvisGroup', text: '+ efterår', show: [ 11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33]}, //alle uger i efteråret
    ],//lukker button

(................. the if sentence is inside a onInitComplete function...........)

if ( admin = 0 )
                { table.buttons([0, 1, 2, 3]).disable();
                console.log(admin);
                 };

I hope someone has an idea. This is the last part I need to change between editable and read-only.

Claus

Greetings
I have a count field, I thought of providing calculation in it, so user can put 2+3 to get 5.
I'm using field.dependent for that.
Here is my code

let field = 'item_count';
editor.dependent(field, (val) => {
                            let obj = {values: {}};
                            try {
                                let r = eval(val);
                                if (r != val) {
                                    obj.values[field] = r;
                                }
                            } catch (e) {
                                obj.values[field] = 0;
                            }
                            return obj;
                        });

This works fine, when I put 2+5 and switch to another field, it will directly be 5.
The problem is when I put 2+5 and then click submit button. It seems that the editor send the data with the originial ("2+5") before the depenent funcion finishes.
Is there a way to make all depenedencies resolve and applied before submissionis sent ?

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

I have a table with 2 columns. The first column is a number input field and the second is a default number. When you put in a number and click off the textbox a calculation is done and the second column is updated with the newly calculated value. My problem is that when you click off the textbox it automatically clears the value in the textbox. If I set a default value it will automatically set it to the default value. Is there a way to make it so it keeps the value in the textbox the value that was typed in?

Thanks!

This is the code that is executed when you click off the textbox.

                    var num = parseFloat(this.value)
                    var rowData = grossCombined.rows($(this).closest("tr")).data()[0];

                    let newValue = rowData.basis - (value2 * rowData.futurePrice) + (value2 * num)
                    let calcFinalPrice = parseInt(newValue) + parseInt(num);

                    rowData.finalPrice = calcFinalPrice;


                    grossCombined.rows($(this).closest("tr")).invalidate().draw();        

Hey,

I'm using the new finished SearchPanes (it's awesome BTW) and utilizing the buttons feature and wanted to be able to show the end user if filters are set or not as a flag on the button itself. I didn't see any built in API to return the number of filters set. It would be helpful in connection with the stateSave so if they come back to the page after awhile, they'll know quickly if they have any filters.

I'm using a bit of a hacky way to do it, by pulling it down from the ".dtsp-title" div that displays it on the SearchPane itself but wanted to know if there was a cleaner way to do this, or if maybe an extra API function could be added?

Here's what I'm using now, the timeout is used since it seemed to be needed as the draw happened a bit too quickly and it would update the wrong value. I tried to utilize this thread, but it seems to be from an earlier version of SearchPane that doesn't work so much anymore:

https://datatables.net/forums/discussion/comment/152361/#Comment_152361

Here's my current solution (it's not great):

        table.on('draw', function () {
            setTimeout(function () {
                var filtersApplied = $('.dtsp-title').text();
                filtersApplied = filtersApplied.replace('Filters Active - ', '');
                $("#filterCount").text(filtersApplied);
            }, 500);
        });

The initComplete sets up the filterBtn with the badge:

            initComplete: function () {
                $(".createBtn").removeClass("btn-secondary").addClass("btn-success");
                $(".refreshBtn").removeClass("btn-secondary").addClass("btn-primary");
                $(".resetBtn").removeClass("btn-secondary").addClass("btn-danger");
                $(".filterBtn").removeClass("btn-secondary").addClass("btn-info");
                $(".filterBtn").append(' <span class="badge badge-light" id="filterCount">0</span>');
            }

Thanks for any help

My use case involves the following the following workflow:

• Default view table grid
• Click custom button to edit / add
• On custom button click hide grid, show form (no popup)
• Edit and submit form
• Form hides, grid shows.

Has anyone please got any pointers on how to do this making maximum use of datatables / editor library?
My implementation is Bootstrap4

Any help or comments appreciated
Mike

Hi! I just wanted to ask something regarding inline editing of datatable but first let me explain what i did.

This is how I declare my datatable.

tbl_item_list = 
$('#tbl_item_list').DataTable({
    'destroy'       : true,
    'paging'        : true,
    'lengthChange'  : false,
    'pageLength'    : 50,
    'ordering'      : true,
    'info'          : true,
    'autoWidth'     : true,
    'select'        : true,
    'sDom'          : 'tp<"clear">', 
    'aoColumnDefs': [
        { targets: [0],width: "10px"},
        {"className": "dt-center", "targets": [1,2,3,4,5,6,7,8]},
        {"className": "custom-center", "targets": 0}       
    ],
    "fnCreatedRow": function( nRow, aData, iDataIndex ) {
        $('td:eq(0)', nRow).append('<button id="remove_row" name="remove_row" type="submit" class="btn btn-default btn-xs"><i class="fa fa-trash"></i></button>');
        $('td:eq(6)', nRow).append('<input type="text" class="form-control cust-label cust-textbox dt-textbox" id="txt-qty" name="txt-qty" onkeypress="return validateFloatKeyPress(this,event);">');
        $('td:eq(7)', nRow).append('<input type="text" class="form-control cust-label cust-textbox dt-textbox" id="txt-disc" name="txt-disc" onkeypress="return validateFloatKeyPress(this,event);">');
    },
    'fnRowCallback' : function( nRow, aData, iDisplayIndex ) {
        $('td', nRow).attr('nowrap','nowrap');
        return nRow;
    }
}).on('user-select', function (e, dt, type, cell, originalEvent) {
    if ($(cell.node()).parent().hasClass('selected')) {
        e.preventDefault();
    }
});

As you can see on fnCreatedRow i add some elements which means when I add a new row a 2 textbox and a button it will show that elements.

Now here is my question. How can I update the last cell of the row while im typing on the textbox?

Thanks

ya he buscado soluciones pero no encuentro requiero ayuda

Hi There,

I'm wondering if it's possible with the filter API to limit shown results in column 4 to not show files ending with .txt

$(document).ready(function() {
var table = $('#example').DataTable( {
var filteredData = table
.column( 4 )
.data()
.filter( function ( value, index ) {
return value != "*.txt") ? true : false;
}
"ajax":{
"url":"https://opendata.arcgis.com/datasets/TheFile.geojson",
"dataSrc": "features"
},
"columns": [
{ "data": "properties.BoreholeId"},
{ "data": "properties.ArchiveId" },
{ "data": "properties.Description" },
{ "data": "properties.UNCPath" }
],
dom: 'lfrtBip',
buttons: [
'copy', 'csv'
]
});
});

Cheers

RockE

Hi There,

I've had a look at this and don't get it. https://datatables.net/reference/option/columns.render

I need to show column 3 display data (url's) as clickable.

$(document).ready(function() {
$('#example').DataTable( {
"columnDefs": [ {
"targets": 3,
"data": "download_link",
"render": function ( data, type, row, meta ) {
return '<a href="'+data+'">Download</a>';
}
} ]

<!--"processing": true,-->
"ajax":{
"url":"https://opendata.arcgis.com/datasets/TheFile.geojson",
"dataSrc": "features"
<!--"dataSrc": "tableData"-->
},
"columns": [
{ "data": "properties.BoreholeId"},
{ "data": "properties.ArchiveId" },
{ "data": "properties.Description" },
{ "data": "properties.UNCPath" },
],
dom: 'lfrtBip',
buttons: [
'copy', 'csv'
]
});

Is this possible with the column render api?

Cheers

RockE

Hi All,

I am calling a function from a cell click and it works fine. However, each time I send it a new data set (destroy = true), it holds onto all previous click events. So, for example if I click row 4 my function is called. If I then do a new search and get a new resultset and I click row 7, my function is called twice - the first time with the data from row 4 (which is likely not even in the current resultset) and then it is called again with data from row 7. If I do this again, then my function is called 3 times, etc...

I've tried to clear out everything I can think of, but I cannot stop this from happening. stopPropagation and stopImmediatePropogation prevent the multiple calls, but the first call is not the correct one, so that doesn't help.

All thoughts appreciated!

let self = this;

$(document).ready(function() {

      var cmeTable = $('#example').DataTable( {
          select: 'single',
          data: data, 
          destroy: true,
          "columns": [
              { data: 'ce_date' },
              { data: 'description' },
              { data: 'accreditor' },
              { data: 'hours_total' },
              { data: 'approval' },
              { data: 'doc_exists' },
              {
                  "class": "dt-view",
                  "orderable": false,
                  "data": null,
                  "defaultContent": "<button>View</button>"
              } 
          ],
          "initComplete": function () {
            $('#example tbody').on( 'click', 'tr td.dt-view', function (e) {

                const clickedElement = $(e.target);
                var tr = clickedElement.closest('tr');
                var row = cmeTable.row(tr);
                var record = row.data();

                self.updateDocument(record);

            } ); 
          }
      } );
    } );

I don't know how to implement state.clear() only when user logout.Please suggest code for the same.
Issue:I am using sessionStorage ,but the implementation of session storage is such that new session is created only when user login in another tab or another window ,I want new session to be created in same tab when user logs in again in same tab.

How to capture the search inputs the user does,so that i can save it and show him, the same searched results?

Hi,

I am using Datatable Editor. The following warning is given when I want to delete a row in the table.I'm getting this error because I get the data from Sql View.

I get the error on the following lines of code.

var table = $('#itemsDT').DataTable();
table.row( this ).delete(); or editor.remove(table.rows(idx), false).submit();

"View or function 'V_LineItemAndImpa' is not updatable because the modification affects multiple base tables."

Is there a way to remove the visibility of that row instead of deleting the row in a table?

i have more than 1000 data and i use data table, i page i use 10 data, i want to update data in page 5, how can i stay in page 5 after the proccess in DONE
Thnkas

We are redrawing the table every now and then because of this problem:
https://datatables.net/forums/discussion/52635/header-columns-do-not-align-to-body-columns-when-using-scroller-and-drawing-while-hidden/

Now it happens that there are rows missing after the redraw, but only if I use Bootstrap styling and only after resizing the browser window (using Chrome).

Repro: http://live.datatables.net/wacoqote/1/edit

1. Make the output pane bigger (drag left handle)
2. Click on "Run with JS"
3. Click on "hide"
4. Resize the browser window from max to non-max and back (Window control buttons)
5. Click on "show"
6. Click on "redraw"

The display of the rows is now corrupt (missing rows) and cannot be repaired.

The same works fine with 1.10.16:
http://live.datatables.net/veminuvo/1/edit

Whenever I am trying to sort a column in from the controller in angualrjs, I always get a warning...this is the code, what can i do?

httpAgent.getLoginHistory().then(response => {
        $scope.loginData = response.data;
        $(document).ready(function () {
            $('#table_id').DataTable({
                        columnDefs: [{
                        targets: [2],
                        orderData: [1, 0]
                    }]
                }
            );
        });
    })

I connected my system with database consists of millions of data. However, the system keeps lagging once connecting. So, I plan to use the serverside processing to initialize the table to empty table so it no need to process all the data in a time (and lag). Not sure if it's a good way to deal the heavy data with the datatable. Here is my what I tried but it didnt work,

<script type="text/javascript">
  $(document).ready(function(){

      fill_datatable();

      function fill_datatable(age = '', age2 ='' ,dataGender = '') 
    {
        var dataTable = $('#table_data').DataTable({
            processing: true,
            serverSide: true,
           " iTotalRecords": 57,
          "iTotalDisplayRecords": 57,
    },

When I am using dataTables in IE 11, the memory usage just keeps building higher and higher. For example if I go to https://datatables.net/extensions/buttons/examples/initialisation/export.html and keep refreshing the page, in task manager I can see the memory usage keep going up for IE. If I use Edge, I see if go up after the first refresh but subsequent refreshes it doesn't go up as much. The program is crashing in IE.
Any ideas?

Hi
We are trying to implement a dataset lock if another user is already editing the same datatset.

Because every user is logged in, we know the id of the user. This id should be written to the dataset on opening the editor and reset after submitting or closing the editor.

On submit this works perfectly. But on closing we have the issue, that if another row in the table is selected, another dataset is updated with the user lock.

Here is our edit button code:

{
    text: '<i class="fas fa-pen"></i>',
    action: function ( ) {

        var refID = adressenTable.rows( { selected: true } ).data()[0].viw_adressen.RefID;
        var KontakteID = adressenTable.rows( { selected: true } ).data()[0].viw_adressen.KontakteID;

        var adressenTableSelectedRows = adressenTable.rows( { selected: true } );
        var adressenTableSelectedRow = adressenTable.row( { selected: true } ).index();
        adressenTable.ajax.reload(function(e){

            // Fehlermeldung ausgeben wenn der Datensatz bereits bearbeitet wird
            if (adressenTableSelectedRows.data()[0].viw_adressen.useredit > 0){
                swal({
                    title: "Warnung",
                    text: "Dieser Datensatz wird bereits bearbeitet.",
                    type: "warning"
                });
            } else if (!$('#row_'+KontakteID).length){
                swal({
                    title: "Warnung",
                    text: "Der Status dieses Datensatzes ist in Bearbeitung. Bitte neu selektieren.",
                    type: "warning"
                });
            } else {

                editorFirma.edit( adressenTableSelectedRow, false )
                    .set( 'viw_adressen.useredit', 22 )
                    .submit(function(){

                    // Informationsbox mit Memo anzeigen falls Memo vorhanden
                    if (adressenTableSelectedRows.data()[0].viw_adressen.KontakteAlarmText){
                        swal({
                            title: "Information",
                            text: adressenTableSelectedRows.data()[0].viw_adressen.KontakteAlarmText,
                            type: "info"
                        });
                    }


                    // Firma bearbeiten
                    if (KontakteID == refID) {
                        editorFirma.edit('#row_'+refID).buttons( {
                            text: 'Speichern',
                            action: function () {
                                // Datensatz freigeben
                                this.set( 'viw_adressen.useredit', "" );
                                this.submit();
                            }
                        } );
                    } else {
                        // Firmenkontakt bearbeiten
                        editorKontakt.edit('#row_'+KontakteID).buttons( {
                            text: 'Speichern',
                            action: function () {
                                // Datensatz freigeben
                                this.set( 'viw_adressen.useredit', "" );
                                this.submit();
                            }
                        } );
                    }

                }); 

            }   

            // Beim schliessen den User wieder aus dem Datensatz austragen
            editorFirma.on( 'close', function ( e, json/*, data */) {
                editorFirma.edit( adressenTableSelectedRow, false )
                    .set( 'viw_adressen.useredit', "" )
                    .submit();

            } );
            editorKontakt.on( 'close', function ( e, json/*, data */) {
                editorKontakt.edit( adressenTableSelectedRow, false )
                    .set( 'viw_adressen.useredit', "" )
                    .submit();

            } );
        }, false);

    },
    titleAttr: 'Bearbeiten',
    enabled: false,
    className:  'space'
},

We also tried to disable pointer-events while processing, but it seems, that pointer-events is enabled in between closing and updating:

$('table')
    .on( 'processing.dt', function ( e, settings, processing ) {
        $('table').css( 'pointer-events', processing ? 'none' : 'auto' );
    } )
    .dataTable();

Thank you very much in advance!