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
Post a Comment