i want individual column search by select input exact on coloumn name not in top or bottom of tabl

i want individual column search by select input exact on coloumn name not in top or bottom of tabl

sairamghsairamgh Posts: 6Questions: 3Answers: 0
edited February 2018 in Free community support
<script>
  $(document).ready(function() {
    
      $('#myTable').dataTable({
              dom: 'Bfrtip',
          buttons: [
             
             'excelHtml5',

          {
 extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'LEGAL'
           } 
         
          ],
            initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
      });
  });
</script>

EDIT: Updated code formatting using Markdown

Answers

  • kthorngrenkthorngren Posts: 21,353Questions: 26Answers: 4,955

    You should be able to create html elements where you want then append the select options there instead of the footer. For example, replace column.footer() in this line .appendTo( $(column.footer()) with the selector for the element to contain the drop down list. The rest of the code should remain the same to assign the column search appropriately.

    Kevin

  • sairamghsairamgh Posts: 6Questions: 3Answers: 0

    hi kthorngren i did not get your solution could you please explain brefiely

  • sairamghsairamgh Posts: 6Questions: 3Answers: 0

    i have 8 column names i want to select input on those column names not in footer or top of the tables

  • kthorngrenkthorngren Posts: 21,353Questions: 26Answers: 4,955

    Take a look at this example:
    http://live.datatables.net/zofaralo/1/edit

    Its based on the column select input search example with two changes (look for the comments). One it gets the title of the column and two it appends the select to the ID containing the column title. My example contains elements for the Name column. Others will need to be added for the other columns.

    I think this is what you are asking for.

    Kevin

This discussion has been closed.