javascript - Datatables : issue with append column data into select field -


hello i'm trying add several coloumn select filter datatables. i'm able add select fields each of column i'm unable append data table select fields option, can me this. appreciated.

here code :

html :

<table id="project-content-datatable" class="display table table-hover table-responsive" width="100%">     <thead>     <tr>         <th class="small text-muted text-uppercase"><strong>id</strong></th>         <th class="small text-muted text-uppercase"><strong>preview</strong></th>         <th class="small text-muted text-uppercase"><strong>parent</strong></th>         <th class="small text-muted text-uppercase"><strong>name</strong></th>         <th class="small text-muted text-uppercase"><strong>description</strong></th>         <th class="small text-muted text-uppercase"><strong>category</strong></th>         <th class="small text-muted text-uppercase"><strong>creation time</strong></th>         <th class="small text-muted text-uppercase"><strong>total duration</strong></th>     </tr>     </thead>     <tbody>     </tbody> </table> 

javascript :

var content_table; content_table = $('#project-content-datatable').datatable({     dom: 'blfrtip',     jqueryui: true,     bpaginate: false,     sscrollx: "100%",     scrolly: '200vh',     scrollcollapse: true,     paging: false,     destroy: true,     columndefs: [         {width: 1, targets: 0},         {width: 1, targets: 1},     ],     responsive: false,     select: true,     buttons: getdatatablebuttons(),     ajax: {         url: content_path,         datasrc: ''     },     columns: [         {"data": "id", "class": "content_id id_padding-right ", "width": "5px"},         {             "data": "thumb",             "class": "preview_padding-right ",             "visible": false,             "render": function (data, type, row) {                 return `<a href=` + data + ` data-fancybox> <img onerror="this.src='/media/dashboard/default/photo.png'" src=` + data + ` width="80" height="45"> </a>`;             }         },         {"data": "parent", "visible": false},         {"data": "name", "class": "content_name", "visible": true},         {"data": "description", "class": "content_description", "visible": true},         {             "data": "category", "class": "", "visible": true, "render": function (data, type, row) {             if (data != null) {                 return data.name;             }             else {                 return 'none';             }         }         },         {"data": "creation_time", "visible": false},         {             "data": null, "class": "content_duration ", "visible": true, "render": function (data, type, row) {              // return get_duration(data);             return 0;         }         }     ]  });  $('#project-content-datatable').datatable( {     initcomplete: function () {         this.api().columns().every( function () {             var column = this;             var select = $('<select><option value=""></option></select>')                 .appendto( $(column.header()) )                 .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>' )             } );         } );     } }); 


Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -