Spinning Edit button icon

Spinning Edit button icon

divad.thgirbladivad.thgirbla Posts: 36Questions: 14Answers: 1
edited September 2019 in Free community support

This seems to me like it should be easy but it's been killing me for two days. I can't figure out why Editor can't load the data row that I've selected. I get the "Unable to find row identifier" message and the spinning Edit button icon no matter what I do. I've checked a lot of examples but can't find a fully functioning example that does what I'm trying to do. At this point, I'm just throwing stuff at the wall to see if it magically works. I want to use the table.row.add() method to populate the tables but don't see a way to get that way of populating the table to coordinate with Editor. I don't know if I should use the columnDefs or the columns attributes or something else.

<script>

var editor; 

$(document).ready(function() {
    //$.extend( $.fn.dataTable.Editor.display.jqueryui.modalOptions, {
    //    //width: 'auto'
    //} );  
    
    
    editor = new $.fn.dataTable.Editor( {
        //ajax: "../php/staff.php",
    //idSrc: "id",        
    formOptions: { main: { focus: null, onBackground: 'none' } }, 
    //display: 'jqueryui',     
    table: '#historyTable',
    fields: [
        { label: 'DT_RowId', name: 'DT_RowId'},
        { label: 'Pen Stat Eff',  name: 'effDate', type: 'datetime', def: function () { return new Date(); }, format: 'MM-DD-YYYY', opts:{yearRange:100}  },
        { label: 'Plan', name: 'plan', type: 'select',
                 options: [{label: "ABC Company Retirement Plan", value: "01"},
                           {label: "ABC Company Pension Plan", value: "02"},
                           {label: "ABC Company SERP Plan", value: "03"}
                          ]},                     
        { label: 'Pension Status',  name: 'status', type: 'select',
                 options:[{label: "ACT: Eligible to Accrue Benefits", value: "ACT"},
                          {label: "ACTLTD: ACTIVE - Long Term Disability", value: "ACTLTD"},  
                          {label: "ACW: ACTIVE - In Waiting Period", value: "ACTLTD"},                        
                          {label: "DTH: Death Not Processed (temporary status)", value: "DTH"},
                          {label: "RETPAY: Retiree in Payment", value: "RETPAY"}                              
                          ]}, 
        { label: 'Record Type', name: 'recordType', type: 'select', 
                 options:[{label: "D: Derived", value: "D"}, 
                          {label: "F: Frozen", value: "F"} 
                          ]}

    ]

    } );     


    var table = $('#historyTable').DataTable({
    //idSrc: "id",
    dom: "Bftrip",  // https://datatables.net/reference/option/dom  ||  https://datatables.net/reference/option/buttons
    searching: false,
    paging: false,   //controls paging display on screen
    ordering: false,  //controls column sorting
    info: false, //"controls Showing x to y of z entries" message
    select: true,
    //ajax: "../php/staff.php",
    
    
    columnDefs: [
        {name: "DT_RowId", targets: [0] },
        {name: "effDate", targets: [1] },
        {name: "plan", targets: [2] },
        {name: "status", targets: [3] },
        {name: "recordType", targets: [4] }     
    ],
    
    //columns: [
    //  { data: "DT_RowId" },
    //    { data: "effDate" },
    //    { data: "plan" },
    //    { data: "status" },
    //    { data: "recordType" }
    //],
    
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ]
    });
    
    table.row.add( [ 5, "11/14/2010", "01", "DTH", "D" ] ); 
    table.row.add( [ 4, "04/01/2002", "01", "RETPAY", "D" ] );  
    table.row.add( [ 3, "08/01/2001", "01", "ACTLTD", "D" ] );  
    table.row.add( [ 2, "02/15/1990", "01", "ACT", "D" ] ); 
    table.row.add( [ 1, "01/01/1990", "01", "ACW", "D" ] );
    
    table.draw(); 
    
    
} );

</script>
 

    <table id="historyTable" class="display compact cell-border nowrap" width="90%" align="left">
          <thead>
            <tr>
              <th align="left">DT_RowId</th>                                  
              <th align="left">effDate</th>
              <th align="left">plan</th>
              <th align="left">status</th>  
              <th align="left">recordType</th>
            </tr>
          </thead>
    </table>

This question has an accepted answers - jump to answer

Answers

  • divad.thgirbladivad.thgirbla Posts: 36Questions: 14Answers: 1

    Oops. I used three ' instead of three `. I don't see a way to edit my post though. Sorry about that.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    I presume you read through this tachnote:
    https://datatables.net/manual/tech-notes/14

    Checkout this example:
    http://live.datatables.net/dopewulu/2/edit

    If you are using arrays then you can assign the Editor's idSrc as the array position.

    Kevin

  • divad.thgirbladivad.thgirbla Posts: 36Questions: 14Answers: 1

    Thanks. The only way I'm able to get past the spinning Edit button problem is if I make idSrc = 0. Doing that brings up the Editor screen but the row I selected isn't the one that Editor displays. It's displaying initialized data as if I had pressed the New button. When I run your example, it's also doing the same thing - displaying spaces for name and position after I've selected a row and pressed Edit.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Sorry, I didn't notice that. Not sure why the fields are blank. Delete selects the correct row.

    Are you able to use objects instead of arrays? If so this is the same example using objects and it works :smile:
    http://live.datatables.net/rozefodo/1/edit

    Kevin

  • divad.thgirbladivad.thgirbla Posts: 36Questions: 14Answers: 1

    My issue is that I'm retrofitting a legacy system with java applet screens into using html, jsp and jstl. The screen's data object already exists in an array format that I can relatively easily put in the table.row.add( [ 0, "11/14/2010", "01", "DTH", "D" ] ) structure in a loop and build my table that way. I may have already tried it wit the data as an object instead of an array. I'll try it again. In either way, I'll still have to use the table.row.add() method to build the table row by row and not define it as an object or array beforehand.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited September 2019 Answer ✓

    As I was tying a different response to you I figured out the issue. Your fields are using fields.name with a string - as the docs specify. This matches with columns.data. In my first test case it didn't match anything which is why the fields are blank we can delete the row as it finds the unique ID. Instead of using a string it looks like specifying the array position works:
    http://live.datatables.net/dopewulu/8/edit

    Sorry for not catching that earlier.

    However using object based data is generally much easier with Datatables.

    Kevin

  • divad.thgirbladivad.thgirbla Posts: 36Questions: 14Answers: 1

    Assigning the column position to the name field worked. Thanks a lot.

This discussion has been closed.