Are you the publisher? Claim or contact us about this channel

Embed this content in your HTML


Report adult content:

click to rate:

Account: (login)

More Channels


Channel Catalog

Channel Description:

Recent Discussions — DataTables forums

older | 1 | .... | 2300 | 2301 | (Page 2302) | 2303 | 2304 | .... | 2326 | newer

    0 0
  • 12/26/18--19:28: using row().data()
  • This youTube video I created summarizes my problem step by step:
    I cannot figure out how to retrieve a specific row data using row().data() which is this link:

    Link to project:

    "Working Code":

    <script type="text/javascript"> 
    $(document).on('click','.edit_btn',function (){
          var id = $(this).attr("id").match(/\d+/)[0];
            var edit_id = $('#example').DataTable().row( id ).data();
            var edit_id = edit_id[0];
             url: 'index.php',
              datatype: "json",
          data: { edit_id : edit_id },
          async: false,
            success: function(result) {
            } //success func
        }); //ajax
    }); //end ready

    What I tried
    I tried many things as in the youTube video. I could not get the original example to work on the link.

    Should I use Jquery like this??
    var last_name = $('#example').DataTable().row( last_name ).data();

    Or php like this?
    $('#editLastName').val( <?php echo $row['first_name']; ?> );

    Or something within the ajax file?

    I made a post on stackoverflow, but no one had any insight at all (which did not surprise me). Hoping kthorngren or someone sees this! Thanks.

    0 0

    Are there any caveats for using Editor with both simple inline editing and AutoFill? We have users who would like both inline editing and Autofill capabilities and I wanted to make sure there were no gotchas to prevent those from working well together.

    0 0

    I have an ajax call to a php files which returns formatted info.

     url = "includes/getattachedData.php";
             data = "callInfo="+localStorage.getItem("callInfo");
                     url : url,
                 data : data,
            type :"POST",
              success : function(returned){
             var AD = returned.trim();
         $('#example').DataTable( {
          data: AD,
         columns: [
           { title: "Event" },
          { title: "Occurred At" },
          { title: "Call ID" },
          { title: "EventID." },
          { title: "Key" },
         { title: "Value" }
         } );

    The info returned looks like perfectly formatted. And if i cut and paste it from the console and put it as
    var AD = [[..... etc it works perfectly. But if i try to use it as the returned value from the ajax it gives me "DataTables warning: table id=example - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see"

    [[ "Added", "2018-02-23T03:33:40.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:33:40.000Z_1519356820_MLN3V193DT0TTC9BBLFCP22RT400003H","PhoneNumber","6727" ],
    [ "Added", "2018-02-23T03:33:40.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:33:40.000Z_1519356820_MLN3V193DT0TTC9BBLFCP22RT400003H","IW_CaseUid","d500c1fd-d75e-4e0e-b874-6544f0584301" ],
    [ "Added", "2018-02-23T03:33:40.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:33:40.000Z_1519356820_MLN3V193DT0TTC9BBLFCP22RT400003H","IW_BundleUid","70dacc69-b791-4817-8480-c45534063b83" ],
    [ "Added", "2018-02-23T03:33:50.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:33:50.000Z_1519356830_MLN3V193DT0TTC9BBLFCP22RT400003H","RTenantDBID","1" ],
    [ "Added", "2018-02-23T03:33:50.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:33:50.000Z_1519356830_MLN3V193DT0TTC9BBLFCP22RT400003H","ServiceObjective","" ],
    [ "Added", "2018-02-23T03:33:50.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:33:50.000Z_1519356830_MLN3V193DT0TTC9BBLFCP22RT400003H","CustomerSegment","default" ],
    [ "Added", "2018-02-23T03:33:50.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:33:50.000Z_1519356830_MLN3V193DT0TTC9BBLFCP22RT400003H","ServiceType","default" ],
    [ "Added", "2018-02-23T03:33:50.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:33:50.000Z_1519356830_MLN3V193DT0TTC9BBLFCP22RT400003H","RVQDBID","" ],
    [ "Added", "2018-02-23T03:33:53.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:33:53.000Z_1519356833_MLN3V193DT0TTC9BBLFCP22RT400003H","GSIP_RECORD","ON" ],
    [ "Added", "2018-02-23T03:33:53.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:33:53.000Z_1519356833_MLN3V193DT0TTC9BBLFCP22RT400003H","GSIP_REC_FN","MLN3V193DT0TTC9BBLFCP22RT400003H_2018-02-23_03-33-53" ],
    [ "Deleted", "2018-02-23T03:34:03.000 0000","MLN3V193DT0TTC9BBLFCP22RT400003H","2018-02-23T03:34:03.000Z_1519356843_MLN3V193DT0TTC9BBLFCP22RT400003H","GSIP_RECORD","ON" ]];

    I'm thinking because it is expecting an array but only getting text which looks like an array.
    Any help greatly appreciated.

    0 0

    please help me in this. I have tried my level best to for SORTING to work. Whenever any column header is clicked, I goes to server side but all the values comes as NULL e.g. start, length, draw, sortColum. this is happening when clicked on header only. Pagination is working fine.

    Any help is appreciated.

    Client side code

    var dataTable = $('#SettlementTable').DataTable({
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        destroy: true,
        "language": {
            "zeroRecords": "<center>No record(s) found !</center>"
        "ajax": {
            "url": "http://localhost/Payments.Productization.GlobalPaymentUI/Home/LoadData",
            "type": "POST",
            "datatype": "json",
            "data": function (d) {
                d.region = $("#region").val();
       = $("#country").val();
                d.paymentType = $("#paymentType").val();
                d.searchGroup = $("#SearchGroup").val();
                d.searchValue = $("#txtSearch").val();
            dataSrc: function (response) {
                if (response.status === "success") {
                } else {
                    return null;
        "columns": [
                "class": "details-control",
                "data": null,
                "orderable": false,
                "defaultContent": ""
            { "data": "country", "orderable": true },
            { "data": "boNumber", "orderable": true },
            { "data": "foNumber", "orderable": true},
            { "data": "dpid", "orderable": true},
            { "data": "customer", "orderable": true},
            { "data": "totalAmount", "orderable": true },
            { "data": "invoiceNumber", "orderable": true},
            { "data": "creditMemo", "orderable": true },
            { "data": "orderStatus", "orderable": true },
            { "data": "orderDate", "orderable": true }
        "order": [[3, "desc"]]
    Server SideCode

    var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
    // Skiping number of Rows count
    var start = Request.Form["start"].FirstOrDefault();
    // Paging Length 10,20
    var length = Request.Form["length"].FirstOrDefault();
    // Sort Column Name
    var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
    // Sort Column Direction ( asc ,desc)
    var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
    // Search Value from (Search box)
    var searchValue = Request.Form["search[value]"].FirstOrDefault();

    0 0

    do I use the datatables in database class manually

    row count 

    how use this ?

    how to get the error codes ?

    0 0

    I want to know if is it possible to do it, due I would like to have thead and tfoot sticky with paging on footer.

    0 0

    Using Editor Datatables if I enter:

    Testing Apostrophe's out

    It is saved as

    Testing Apostrophe\'s out

    I saw some forum posts about Magic Quotes, but I'm using PHP 7.14 so that should rule that feature out.

    Any ideas about this appreicated.


    0 0
  • 12/18/18--08:32: Set Custom id for every cell
  • Hi,
    I have a table ("subscriptions") with the list of user subscribed to a site; I have attached to this table some columns: the number is dynamic.
    The values of this colums ara taken from another table, where I have the id of the columns and the value (and the row id as primary key). So, any cells in the rendered table have a "custom" id, not the row id.
    In the php controller, after the main sql to subscriptions table, I have a loop that add a column and for every row it search the correct value in the db: for 3 lines and 2 columns like below, I have the main sql and other 6 query.

    How I can set, in the editor, the cell's id so when I edit the cell the controller can edit the correct value?

    || Id_row | Username |       Col_A      |       Col_B     | ....||
    ||  1        | Frank         | a ( = 1) | b ( = 2) | ...||
    ||  2        | Mario         | c ( = 3) | d ( = 4) | ...||
    ||  3        | Frank         | e ( = 5) | e ( = 6) | ...||


    0 0

    Hi Allan,

    I am using jqueryui, and have a complex form I want to use an editor template with. Following the instructions at I created a template, but quickly realized that since I'm not using lightbox the class configuration under Lightbox customisation section wouldn't work.

    I reverse engineered what you are doing within editor.jqueryui.js, and it looks like the .dialog widget is initialized using Editor.display.jquery.modalOptions which is configured to have width of 600px.

    It seems like I cannot override this in my javascript because the dialog is created on initialization. Is there a reason the width needs to be hard-configured? Or is there any way to override this that I'm missing?

    BTW, seems to work a little better which changing the 600 to 'auto' using the debugger, but maybe there's something still not quite right with position.

    0 0

    I have an editor setup so that all of the fields in a row appear in the editor, but only the last one, the User Login Email, is actually user editable.
    The user may open an editor dialog box, or edit the email address in-line.

    I did this with:

                    keys: {
                            columns:[6],    //UserLoginEmail, The only user editable field
                            editor:  editor,

    I'm getting the interaction I want, but if the user double clicks on any of the inline non-editable field, I get this error in the console:

    dataTables.keyTable.js:469 Uncaught TypeError: Cannot read property 'cell' of null

    Is there any way to mitigate this?

    Here are my key bits of code:

            editor = new $.fn.dataTable.Editor( {
                    data: sampleDataStaff,
                    table: "#example",
                    fields: [ {
                            label: "ID",
                            name:  "id",
                            type: "hidden",
                            attr: {placeholder: 'ID'}
                         }, {
                            label: "UserStatus",
                            name:  "UserStatus"
                        }, {
                            label: "Group",
                            name:  "GroupName"
                        }, {
                            label: "User Name",
                            name:  "UserName",
                            attr:   {placeholder: 'No Name'}
                            label: "Role Title",
                            name: "RoleTitle"   
                        }, {
                            label: "User Login Email",
                            name:  "UserLoginEmail",                
                        }, {
                            label: "Date",
                            name:  "Date",
                            type: "hidden",
                            //type:  "datetime"
                } );
                table = $('#example').DataTable( {
                    dom: "Bfrtip",
                    "paging": false,
                    data: sampleDataStaff,
                    columns: [
                          data: null,
                          defaultContent: '',
                          className: 'select-checkbox',
                           orderable: false
                        { name: "id",           data: "id",         orderable: false,   className: "columnDisabled",     visible: false},
                        { name: "UserStatus",   data: "UserStatus",     orderable: false,   className: "columnDisabled"},
                        { name: "GroupName",    data: "GroupName",      orderable: true,     className: "columnDisabled"},
                        { name: "UserName", data: "UserName",       orderable: false,   className: "columnDisabled"},
                        { name: "RoleTitle",        data: "RoleTitle",      orderable: false,   className: "columnDisabled"},
                        { name: "UserLoginEmail",   data: "UserLoginEmail", orderable: false},
                        { name: "Date",     data: "Date",           orderable: false,    className: "columnDisabled"     visible: false}
                    "order": [ 7, 'desc' ],  //Order by Date
                    columnDefs: [
                        {targets: 2,
                        fieldName: "UserStatus",
                         render: function (data) {
                             if (data == 'active') {
                                 return('<div class="primaryDotBlack"></div>');
                             }else {
                                 return('<div class="primaryDotGray"></div>');
                    keys: {
                        columns:[6],    //UserLoginEmail, The only user editable field
                        editor:  editor,
        ..... Button Stuff........
        ...... }); //End Of DataTable

    0 0

    A few days ago was realised a new version of Bootstrap (4.2.1) and it doesn't work with DataTables 1.10.19. Can you make a correction, or tell me what to change to get back working? Thx

    0 0

    I am using SmartAdmin Angular 5 framework 1.9.1, which provides DataTables capabilities. I have installed DataTables 1.10.18, and Select 1.2.6.

    My app can use either test data, or data from a web service. When I use test data, all works fine with the Delete and Archive buttons - meaning, the button action events are fired. But, when using web service data, the Delete and Archive buttons do not fire the button actions.

    You can try my app at:

    To see problem, do this:

    1. Use latest Chrome or Firefox (no mobile), make browser window wide enough to see the buttons (as shown below).
    2. Login - I've hard-coded in the login credentials.
    3. Click Notifications in left pane.
    4. Expand General Messages, wait for table to display. Data comes from web service.
    5. Select one or multiple rows.
    6. Click Delete or Archive buttons - you should see a YES/NO dialog, it does not work.
    7. Expand Colleagues, then expand Colleague Messages, wait for table to display. Test data is hard-coded.
    8. Select one or multiple rows.
    9. Click Delete or Archive buttons - you should see a YES/NO dialog, it does work.

    Looking at the .ts code line 145, you see that I go through a table.clear().rows.add(data_from_web_service).draw() operation. I tried it w/wo clear(), but same problem.

    I have the following component.ts code:

    import { NgModule, Component, OnInit, Injectable, Inject, ViewChild, DoCheck } from '@angular/core';
    import { Router } from '@angular/router';
    import { FormGroup, FormControl } from '@angular/forms';
    import { FadeInTop } from "../shared/animations/fade-in-top.decorator";
    import { NotificationsService } from './notifications.service';
    import { NotificationService } from '../shared/utils/notification.service';
    import { DatatableComponent } from '../shared/ui/datatable/datatable.component';
    declare let $:any;
      selector: 'sa-datatables-case',
      templateUrl: './notifgenmsg.component.html',
      styleUrls: ['../../assets/css/tmd_basic.css']
    export class NotifGenMsgComponent implements OnInit, DoCheck {
      @ViewChild(DatatableComponent) ngxDatatableComponent: DatatableComponent;
      public genMsgs: any;
        private router: Router,  
        private notificationsService: NotificationsService, //TMD version
        private notificationService: NotificationService   //SA version used for dialogs
      ) {}
      ngOnInit() {  
        //###console.log("NotifGenMsgComponent ngOnInit - ENTRY");
        //this allows the router.navigate to re-call this component, providing fresh data
        this.router.routeReuseStrategy.shouldReuseRoute = function(){
           return false;
        //this kicks-off the web service call for data, when data is returned the (val) block is reached then refreshDataTable() is called 
        //###console.log("NotifGenMsgComponent ngOnInit - EXIT");
      ngDoCheck() {
        //this is called after ngOnInit - see
      handleButtons() {
        if($(this.ngxDatatableComponent)) {   
          if($(this.ngxDatatableComponent).DataTable) {
             console.log('processing button clicks');
             const ngxDataTable = $($(this.ngxDatatableComponent).DataTable.tables()).DataTable();
             const deleteBtnNum = 4;
             const archiveBtnNum = 5;
             ngxDataTable.button(deleteBtnNum).action(() => { //lambda expression provides access to outer this, but inner this is not accessible
                //###console.log( this.text() +' button was clicked' ); //will not work when using lambda expression
                console.log('Delete button clicked');
                const selection = ngxDataTable.rows({ selected: true } ).data().toArray();
                this.doSelection(selection, 'Delete');
             ngxDataTable.button(archiveBtnNum).action(() => { //lambda expression provides access to outer this, but inner this is not accessible
                //###console.log( this.text() +' button was clicked' ); //will not work when using lambda expression
                console.log('Archive button clicked');
                const selection = ngxDataTable.rows({ selected: true } ).data().toArray();
                this.doSelection(selection, 'Archive');
       doSelection(selection: any, buttonName: String) {
         //remove after testing
         let rowStr = "";     
         for (const row of selection) {
           rowStr += row.rowid +",";
         rowStr = rowStr.substring(0, rowStr.lastIndexOf(","));
         const content = "Do you want to " +buttonName +" the " +selection.length +" rows selected?";
           title : "<i class='fa fa-question-circle txt-color-yellow'></i> " +buttonName +" <span class='txt-color-white'><strong>" + $('#show-shortcut').text() + "</strong></span>",
           content : content,
           buttons : '[No][Yes]'
         }, (ButtonPressed) => {
           if (ButtonPressed === "Yes") {
             //###console.log(buttonName +' selected rows');
             //call appropriate web service
             for(let i=0; i<selection.length; i++) { 
               //###console.log("row having database ID " +selection[i].rowid +" selected for " +buttonName); 
       getNotifGenMsgData() {  
          //###console.log("NotifGenMsgComponent getNotifGenMsgData - ENTRY");
          const TESTING = false;        
          if(TESTING) {
            //###console.log("NotifGenMsgComponent getNotifGenMsgData - ############# USING TEST DATA");
            const resStr = '['
                         + '{"checked":null,"rowid":"14","personID":"ALL","senderID":"ADMIN","message":"TEST DATA10 - TangleMyData has an outage planned for November 15, 2018 from 1:00 UTC until 2:00 UTC.","messageStatus":"NEW","messagePrimType":"SYSTEM","messageSubType":"GENERAL","dateExpires":"2018-11-15 09:02:37","dateCreated":"2018-11-05 09:02:37","dateLastUpdate":"2018-11-08 01:19:10"},'
                         + '{"checked":null,"rowid":"15","personID":"ALL","senderID":"ADMIN","message":"TEST DATA11 - TangleMyData has an outage planned for November 15, 2018 from 1:00 UTC until 2:00 UTC.","messageStatus":"NEW","messagePrimType":"SYSTEM","messageSubType":"GENERAL","dateExpires":"2018-11-15 09:02:37","dateCreated":"2018-11-05 09:02:37","dateLastUpdate":"2018-11-08 01:19:10"},'
                         + '{"checked":null,"rowid":"16","personID":"ALL","senderID":"ADMIN","message":"TEST DATA12 - TangleMyData has an outage planned for November 15, 2018 from 1:00 UTC until 2:00 UTC.","messageStatus":"NEW","messagePrimType":"SYSTEM","messageSubType":"GENERAL","dateExpires":"2018-11-15 09:02:37","dateCreated":"2018-11-05 09:02:37","dateLastUpdate":"2018-11-08 01:19:10"}'
                         + ']';
            this.genMsgs = JSON.parse(resStr);
          } else {
                (val) => {
                   this.genMsgs = this.notificationsService.genMsgs;
                   if (this.genMsgs) {
                      console.log("NotifGenMsgComponent getNotifGenMsgData - genMsgs is not null");
                   } else {
                      //###console.log("NotifGenMsgComponent getNotifGenMsgData - genMsgs is null");
                (err) => {
                   //###console.log("NotifGenMsgComponent getNotifGenMsgData - error: " +err);
          //###console.log("NotifGenMsgComponent getNotifGenMsgData - EXIT");
       refreshDataTable() {
         if($(this.ngxDatatableComponent)) {   
           if($(this.ngxDatatableComponent).DataTable) {
             console.log('refreshing ngxDataTable #####################');
             const ngxDataTable = $($(this.ngxDatatableComponent).DataTable.tables()).DataTable();   

    Here's a screen shot of my General Messages table:


    0 0


    I am wondering whether TinyMCE is able to work in a child row. In my case, I have a child-row for each row, and I want to add a TinyMCE editor in each child-row.

    The problem is that, as shown in screenshot, TinyMCE does not work when child-row is shown, I can only see a textarea there without TinyMCE icons, toolbar etc. I simplified the relevant code and attached below:

    <script type="text/javascript">
    selector: '#email_editor',
    statusbar: false,
    menubar: false,
    theme: 'modern',
    plugins: "advlist lists image textcolor code paste",
    height: 150,
    toolbar: 'formatselect outdent indent bold italic strikethrough | forecolor backcolor |
    alignleft aligncenter alignright | numlist bullist'

    $('#labmeetingrecord tbody').on('click', 'td.edit_button', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );
    if ( row.child.isShown() ) {
    else {
    row.child(format()).show(); //format(

    function format ( ) {
    '<table width:100% cellpadding="0" cellspacing="0" id="child_table" border="0">' +
    '<textarea id="email_editor"></textarea>'+

    Could anyone please give any hint?


    0 0

    i want full workable code in jsfiddle pls

    0 0

    Hello Team,

    Is it possible to show document link in DataTable record along with its preview?
    If yes, kindly share example.

    0 0

    I use this code in my Javascript Editor instance field definitions:

    }, {
        label: lang === 'de' ? 'Dokumentation:' : 'Documentation:',
        name: "file[].id",
        type: "uploadMany",
        display: function (fileId, counter) {
            var fileNameExt = contractEditor.file('file', fileId).name;
            if (fileNameExt.substr(0,9) === 'interface') {
                return '';
            return fileNameExt;
        dragDropText: dragDropText,
        uploadText: uploadText,
        noFileText: noFileText,
        processingText: processingText,
        fileReadText: fileReadText

    Files with names starting with "interface" shouldn't be displayed in the Editor popup because I don't want the users to be able to delete them. This doesn't really work because there still is this little button to delete the file in Editor even though the label isn't there because I set it to blank. I tried to return null or false but that didn't work either.

    Is there any solution for this?

    This is what it looks like with the little delete button for the unlabeled file at the right hand side.

    0 0


    I am creating several databases and some of tihem have textarea's with quite a lot of data in it. Because of this the overview in datatables is a scrolling nightmare.

    Is there a way to limit the textarea so it only shows several lines (collapsed) and possible uncollapse with a button or something? I could hide the column but then i cannot search data from it anymore which is not prefered. In the editor the complete uncollapsed version is fine.

    Best regards,

    0 0

    I am not a geek,
    I use mysql simple database with one tabe
    and /! DataTables 1.10.4
    and i tested with
    jQuery JavaScript Library v3.3.1
    /*! jQuery v1.11.1

    I have the same issue

    I don't understand why i can't write da ba to search in column 1 = dany marcus + column 2 = backer
    I can only search on one column by ny or ny%ma

    My searching is only possible on one column.... and i need to add % beetwen string

    Thanks for your help

    0 0
  • 12/21/18--20:00: 2 table droag and drop
  • Hi guys

    Hope you are all well.

    Hope you can help me with this again. Can i have 2 tables then from 1 table to another table drag and drop multiple selected records. Please help. thanks so much for always helping me.
    Hope you all enjoy your christmas. be happy always.

    0 0
  • 12/27/18--09:08: dt-buttons empty
  • How to use export to excel .Thanks in advance

older | 1 | .... | 2300 | 2301 | (Page 2302) | 2303 | 2304 | .... | 2326 | newer