CODEWITHSUNDEEP
javascriptjquery-selectorstwitter-bootstrap-3datatablesx-editable
Andy
Andy

Reputation: 50560

How can I enable xeditable on a single datatable column?

I am attempting to use xeditable on a datatable with the following structure

<table id="example">
    <thead>
        <tr>
          <th>ID</th>
          <th>Type</th>
        </tr>
    </thead>
    <tbody>
        {% for r in records %}
        <tr>
            <td><a href="{{ r.link }}">{{ r.id }}</a></td>
            <td><a href="#" pk-data="{{ r.id }}" data-type="select" data-value="{{ r.type.id }}">{{ r.type.name }}</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

With a sample couple rows that end up looking like this:

<tr>
    <td><a href="http://example.com">ABC-123</a></td>
    <td><a href="#" pk-data="ABC-123" data-type="select" data-value="5">Things</a></td>
</tr>
<tr>
    <td><a href="http://example.com">XYZ-890</a></td>
    <td><a href="#" pk-data="XYZ-890" data-type="select" data-value="5">Things</a></td>
</tr>

I want to make the second column editable using xeditable. I have the block of code to do so

$.fn.editable.defaults.mode = 'inline';
$('#example.td a').editable({
    type: 'select',
    name: 'Type',
    title: 'Type',
    source: [
      {value: 0, text: 'Nothing'},
      {value: 1, text: 'Everything'},
      {value: 2, text: 'Something'},
      {value: 3, text: 'That Thing'},
      {value: 4, text: 'This Thing'},
      {value: 5, text: 'Things'}
    ]
});

This does not work. I do not get errors in my console. It just doesn't do anything. No popups, no inline, nothing.

I suspect that it is a result of my ('#example.td a'). My Javascript is rusty, but I believe that should apply to both columns, correct? How can I make this selection apply to only the second column?

I am expecting something like this (taken from the Demos, specifically Select, local array, custom display)

Expected

I have provided a jsfiddle to assist in showing my problem

Upvotes: 2

Views: 7129

Answers (2)

Zach Painter
Zach Painter

Reputation: 198

I just wanted to let you know that the above solution is good... but the datatables search function breaks because the datatables row information is not being updated I added this to the above fiddle and now after editing a field you can now filter on that new data. There are two ways to achieve the desired result:

Recreate datatable

$('#example .second_td a').on('save', function(e, params) {
    //recreate datatable
    $('#example').DataTable().destroy();
    $('#example').dataTable({
          "aaSorting": [[ 1, "desc" ]],
          "lengthMenu": [[50, 250, 500, 1000], [50, 250, 500, 1000]],
          "iDisplayLength": 250
        });
});

Update single cell in datatable

$('#example .second_td a').on('save', function (e, params) {
    var $td = $(this).closest('td');
    $('#example')
        .DataTable()
        .cell($td)
        .data('<a href="#" pk-data="ABC-123" data-type="select" data-value="' + params.newValue + '" class="editable editable-click">' + $td.find(':selected').text() + '</a>'); 
});

Upvotes: 1

Daniel
Daniel

Reputation: 37061

One way could be to add class="second_td" to your second <td> element and change you selector to ('#example .second_td a')

Here is a working fiddle , I said that you need to add the class="second_td" to your second <td> (not to the <a> tag in your second td

Upvotes: 4

Related Questions