jqueryjquery-jtable

JQuery jTable set parameters on table cells


Is it possible to set parameters on jTable's table cells, something like this?

<td data-iuser_key=9499949 data-cuser_lnm='testing' class=userdata>

</td>

I know how to set params on inner elements, but I don't know how to set params on table cells. For inner elements, something like this:

input: function (data) {
        if (data.record) {
            return '<input type="text" name="Name" style="width:200px" value="' + data.record.Name + '" />';
        } else {
            return '<input type="text" name="Name" style="width:200px" value="enter your name here" />';
        } 

My code:

$('#tblOffers').jtable({
    title: 'Offers',
    paging: true,
    pageSize: 20,
    sorting: true,
    defaultSorting: 'cORAC_NUM DESC',
    actions: {
      listAction: "/SalesOfferInvoiceDeliveryNote/SearchOffers/"
    },        
    fields: {
      cORAC_NUM: {
        key: true,        
        title: 'ORAC number'
      },
      cORAC_DAT: {
        title: 'Date'
      },
      cACCO_NME: {
        title: 'Customer'
      },
      ORAC_GRO_SUM: {
        title: 'Paying'
      }
    }
  });

Solution

  • Your code shows a field input function not a field display function. The input function is used inside create/edit forms and never appears in the table itself, for that you must use a display function. Your problem arises because when display function is created, the td that you wish to manipulate does not yet exist in the DOM.

    In addition to the display function, there is also the field option listClass which will add the class to the containing td.

    You can of course use the display function, to create a div wrapper around you display content, and you can add 'parameters' to the div.

    Such that a field definition like

    rockBand: {
       listClass: 'rockNroll',
       display: function (data) {
           var div = $('<div />')
                      .attr('data-iuser_key',9499949)
                      .attr('data-cuser_lnm','testing');
           div.append(data.record.rockBand);
           return div;
       }
    

    }

    should generate a DOM like

    <td class='rockNroll'>
        <div data-iuser_key=9499949 data-cuser_lnm='testing'>
            The rolling Stones
        </div>
    </td>
    

    I would have thought it would be easy enough to structure jQuery selectors to find the td.rockNroll > div combinations as readily as td. You have not explained why you need to add parameters to the 'td' itself. If you absolutely must have the 'parameters' on the td element itself, you could always use the jTable recordsLoaded event, to go back over the table just constructed, and promote the parameters sitting on the div element to the parent td element.