DataTable filtering in column with select-list data

rogero · June 2016

Hi,

In http://live.datatables.net/mobedan/56/edit I Have:

HTML:

<body>
    <div class="container">
        <table id="example" class="display" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>

            <tbody>
                <tr>
                    <td><select name="[0].idInvitadoEstado" class="noduplicate" data-val="true" data-val-number="El campo Estado debe ser un número." data-val-required="El campo Estado es obligatorio."><option selected="selected" value="2">APROBADO</option><option value="3">NO APROBADO</option><option value="4">PENDIENTE CONFIRMACIÓN</option></select></td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$3,120</td>
                </tr>
                <tr>
                    <td><select name="[1].idInvitadoEstado" class="noduplicate" data-val="true" data-val-number="El campo Estado debe ser un número." data-val-required="El campo Estado es obligatorio."><option selected="selected" value="2">APROBADO</option><option value="3">NO APROBADO</option><option value="4">PENDIENTE CONFIRMACIÓN</option></select></td>
                    <td>Director</td>
                    <td>Edinburgh</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$5,300</td>
                </tr>
                <tr>
                    <td><select name="[2].idInvitadoEstado" class="noduplicate" data-val="true" data-val-number="El campo Estado debe ser un número." data-val-required="El campo Estado es obligatorio."><option selected="selected" value="2">APROBADO</option><option value="3">NO APROBADO</option><option value="4">PENDIENTE CONFIRMACIÓN</option></select></td>
                    <td>Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$4,800</td>
                </tr>
                <tr>
                    <td><select name="[3].idInvitadoEstado" class="noduplicate" data-val="true" data-val-number="El campo Estado debe ser un número." data-val-required="El campo Estado es obligatorio."><option selected="selected" value="1">PENDIENTE APROBACIÓN</option><option value="2">APROBADO</option><option value="3">NO APROBADO</option></select></td>
                    <td>Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>$3,600</td>
                </tr>
                <tr>
                    <td><select name="[4].idInvitadoEstado" class="noduplicate" data-val="true" data-val-number="El campo Estado debe ser un número." data-val-required="El campo Estado es obligatorio."><option selected="selected" value="1">PENDIENTE APROBACIÓN</option><option value="2">APROBADO</option><option value="3">NO APROBADO</option></select></td>
                    <td>Financial Controller</td>
                    <td>Edinburgh</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>$5,300</td>
                </tr>
                <tr>
                    <td><select name="[5].idInvitadoEstado" class="noduplicate" data-val="true" data-val-number="El campo Estado debe ser un número." data-val-required="El campo Estado es obligatorio."><option selected="selected" value="1">PENDIENTE APROBACIÓN</option><option value="2">APROBADO</option><option value="3">NO APROBADO</option></select></td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>$4,525</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

Can I filtering first column? What is the regular expresion?
I think it's -> '^.+selected="selected" value="' + id + '".+$'
But not run

$(document).ready( function () {
var table = $('#example').DataTable();

table
.column(0)
.search( '^.+selected="selected" value="' + id + '".+$', true, false )
.draw();
} );

id it's the value to filtering...

Any ideas? it's possible?

Thanks very much!!

jr42.gordon · June 2016

Look at the https://datatables.net/reference/option/columns.render documentation. There are a bunch of ideas you could do.

You could add the following inside the td via the render function

<span class="full_val"></span>

// CSS
td span.full_val {
    display: none;
}

--- or ---
You could utilize this

"columnDefs": [ {
    "targets": 0,
    "render": {
      "filter": "(selected option)",
      "sort": "(selected option)",
      "display": function ( data, type, full, meta ) {
            return (select html)
       }
    }
  } ]

Now within your change event handler, you will need to reference the td and use https://datatables.net/reference/api/cell().invalidate()

rogero · June 2016

Thank you very much @jr42.gordon , but I think this is not valid because I need this input to allow the user to change the values, and then filter ...
I think it's not possible

jr42.gordon · June 2016

Sorry for late response, but I use the first option I gave within my application and it works beautifully.

Here is what my render function looks like

"render"  : function (row, type, data) {
          return $.jqote(templates.basic_input, 
                                {'dataElem'  : 'SHORT',
                                'val'        : data.CMNTS.SHORT,
                                'maxLength'  : 29,
                                'inputClass' : 'input_comment'
                            }) + $.jqote(templates.hidden_input_val, data.CMNTS.SHORT
          );
}

Final HTML looks like

<input class="arrow input_comment" type="text" maxlength="29" data-elem="SHORT" value="KEEP CLEAR FOR NOW" previous-value="KEEP CLEAR FOR NOW" />
<span class="hide full_val">KEEP CLEAR FOR NOW</span>

Event Handler looks like

.on('blur', '.input_comment', function(e) {
            // $(e.relatedTarget) = next focus element
            // $(e.target) = previous focus element
            updateDrawCell( $(e.target), DATA_TABLE );

})

And finally the helper function

   /*
    * This will update the value used for the given cell in the DataTable and
    * redraw that cell only, calling necessary 'render' function.
    */
    updateDrawCell: function($content, dt, cb) {
        var cell = $content.closest('td');

        // this is necessary to allow the re-rendering of the cell and new html content
        (function(cell, dt, cb) {
            dt.cell(cell).invalidate().render();
            if (cb) cb();
        }).debounce(100)(cell,dt,cb);
    },

DataTable filtering in column with select-list data

DataTable filtering in column with select-list data

Replies

Howdy, Stranger!

Categories

DataTables

DataTable filtering in column with select-list data

DataTable filtering in column with select-list data

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables