How to filter selected value of select in table using datatables

Question

*my jsfiddle: http://jsfiddle.net/6e9r2js1/

this is someone's reference working link: http://jsfiddle.net/8c96qx2z/

this is someone's reference working link: http://jsfiddle.net/a3o3yqkw/

this is my code:

<table id="tabledetail">
<thead>
  <tr>
     <th>S.#</th>
     <th>Name</th>
     <th>Type</th>
   </tr>
</thead>
<tbody>
   <tr>
      <td>1</td>
      <td><input type="text" id="name_1" name="myName[]" value="Ben"></td>
      <td>
          <select class="form-control" id="type_1" name="myType[]">
              <option value="0" selected>No</option>
              <option value="1">Yes</option>
          </select>
      </td>
   </tr>
   <tr>
       <td>2</td>
      <td><input type="text" id="name_2" name="myName[]" value="Dan"></td>
      <td>
          <select class="form-control" id="type_2" name="myType[]">
              <option value="0">No</option>
              <option value="1" selected>Yes</option>
          </select>
      </td>
   </tr>
</tbody>
</table>

<script>
    var table = $('#tabledetail').DataTable({
        'orderCellsTop': true,
        'fixedHeader'  : true,
        'paging'       : true,
        'lengthChange' : true,
        'searching'    : true,
        'ordering'     : true,
        'info'         : true,
        'autoWidth'    : true,
        'columnDefs'   : [{ "type": "html-input", "targets": ['_all'] }]
    });
</script>

On type its not searching...

thats someone else jsfiddle i want to implement it in my code.. — Danial212k
– Danial212k, Commented Oct 16, 2019 at 12:36
here i tried this code but doesnt work datatables.net/forums/discussion/54017/… — Danial212k
– Danial212k, Commented Oct 16, 2019 at 12:37
create column value dynamically then assign function to select — Negi Rox
– Negi Rox, Commented Oct 16, 2019 at 13:03
column select's selected value is already coming from database dynamically, i want my search filter apply only on selected value of select and input and simple text in td — Danial212k
– Danial212k, Commented Oct 16, 2019 at 13:11

Amit · Accepted Answer · 2019-10-16 14:29:43Z

0

I have found a fiddle url from this stackoverflow answer: https://stackoverflow.com/a/27860934/540195

I have updated that fiddle (http://jsfiddle.net/s2gbafuz/) and now it's working fine,

You can check the forked working fiddle link: http://jsfiddle.net/amitmondal/zc5a3eox/1/

$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
   return $(value).val();
};

var table = $("#example").DataTable({
    columnDefs: [
       { "type": "html-input", "targets": [1, 2, 3] }
    ] 
});

$("#example td input").on('change', function() {
    var $td = $(this).parent();
    $td.find('input').attr('value', this.value);
    table.cell($td).invalidate().draw();
});
$("#example td select").on('change', function() {
    var $td = $(this).parent();
    var value = this.value;
    $td.find('option').each(function(i, o) {
      $(o).removeAttr('selected');
      if ($(o).val() == value) {
      	 $(o).attr('selected', true);
         $(o).prop('selected', true);
      } 
    })
    table.cell($td).invalidate().draw();
});

Please don't hesitate to let me know if you need any further help.

edited Oct 16, 2019 at 14:29

answered Oct 16, 2019 at 13:31

Amit

1,5601 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Danial212k Over a year ago

Hi, can u please check my fiddle jsfiddle.net/6e9r2js1 i implemented ur code there but doesnt work

Amit Over a year ago

I didn't see my code in your fiddle, would you please check again?

Amit Over a year ago

Yes, you are right :) , I mentioned that fiddle url and now going to share the answer link also.

Danial212k Over a year ago

Kindly check this fiddle which I am tying to fix jsfiddle.net/6e9r2js1/2 your given fiddle I have already mentioned in question from searching the same stackoverflow anser which is working, i want my fiddle work, thanks.

Danial212k Over a year ago

I managed to fix a bit see this fiddle jsfiddle.net/k7ymhgrs I think issue is with targets where column number need to be told where to search, as I added 1 more column it started to work

Collectives™ on Stack Overflow

How to filter selected value of select in table using datatables

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related