I am using the data table plugin method, do I have to add something to make it work, my plan is when clicking on the table it will automatically show another table.
$('#pl_medias body').on('click', function() {
table.destroy();
});
Here is the code :
this.getMediaList = function() {
var jqxhr = $.getJSON( url + 'plugins/DataTables-1.10.12/media/js/i18n/fr_FR.json', function( data ) {});
jqxhr.done(function(data) {
self.pl_dt_language_json = data ;
var languages_dt = self.pl_dt_language_json ;
languages_dt = $.extend(languages_dt, {"sSearch": ""});
这是datatables插件:
self.pl_medias_dt = $('#pl_medias').DataTable({
language: languages_dt,
"columns": [
{ "data": "orientation_and_type_icon" },
{ "data": "name" },
{ "data": "length" }
],
"columnDefs": [
{ "searchable": false, "orderable": false, "targets": 0 },
{ className: "pl_media_cell_icon", "targets": [ 0 ] } ,
{ className: "pl_media_cell_name", "targets": [ 1 ] } ,
{ className: "pl_media_cell_length", "targets": [ 2 ] }
],
"order": [[ 1, 'asc' ]],
initComplete: function(settings, json) {
// search
if($('#pl_medias_filter input').eq(0).size() > 0) {
$('#pl_medias_filter input').eq(0).attr("placeholder", "Rechercher un fichier") ;
$('#pl_medias_filter input').unbind();
$('#pl_medias_filter input').on( 'keyup', function () {
var searchInput = $(this).val();
if(searchInput.length == 0) {
所有代码均正常运行:
window.clearTimeout(self.pl_medias_dt_filter_status);
self.pl_medias_dt.search(searchInput).draw();
}其他{
if(searchInput.length <3){
window.clearTimeout(self.pl_medias_dt_filter_status);
self.pl_medias_dt_filter_status = setTimeout(function(){
self.pl_medias_dt.search(searchInput).draw();
},3000);
}其他{
window.clearTimeout(self.pl_medias_dt_filter_status);
self.pl_medias_dt_filter_status = setTimeout(function(){
self.pl_medias_dt.search(searchInput).draw()
},1000);
}
}
});
}
// Here is the code :
$('#pl_medias tbody').on( 'click', function () {
table.destroy();
} );
/*
*Added new id and class name for all folders
*/
$('#pl_medias tr').has('div.pl_media_folder').prop({
'id': 'row-id-folder',
'class': 'row-class-folder'
});
/*
*Added new id and class name for all medias
*/
$('#pl_medias tr').has('div.pl_media_data').prop({
'id': 'row-id-media',
'class': 'row-class-media'
});
$('#pl_medias tbody').on('click', 'tr', function () {
$('#pl_medias tbody tr').not(this).popover('hide') ;
$(this).popover('toggle') ;
});
},
"preDrawCallback": function( settings ) {
$( "#pl_medias tbody tr" ).popover('hide') ;
},
drawCallback: function(settings) {
$( "#pl_medias tbody tr" ).popover('hide') ;
// hover tooltip media details
$( "#pl_medias tbody tr" ).popover({
placement: 'bottom',
trigger: 'manual',
html: true,
container: 'body',
template: '<div class="popover popover_medias" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
content: function () {
var content = $(this).find('.pl_media_cell_icon .pl_media_data .thumbnail').html() ;
content = '<a href="javascript:void(0);" onclick="closePopover(this);" class="glyphicon glyphicon-remove pull-right pl_popover_close"></a><br /><br />'+content ;
return content ;
}
});
// refresh drag and drop
self.initDragDropSortElementForContentPlaylist();
},
"serverSide": true,
"paging": false,
"lengthChange" : false,
"scrollY": 122,
"info": false,
"ajax": {
url : url + "playlists/ajaxSearchMedias", // json datasource
type: "post"
},
"dom": '<lf<t>ip>'
});
});
},
答案 0 :(得分:0)
我添加了它,而且效果100%:-)
$('#pl_medias tr')。has('div.pl_media_folder')。on('click',function(){ $('#pl_medias')。dataTable()。fnDestroy(); //从当前表中销毁DataTables $('#pl_medias')。empty(); //如果列更改则为空