Add clear search button to data tables.

This commit is contained in:
JonnyWong16 2015-08-19 13:25:29 -07:00
parent 5a1516286c
commit 01b3ae377b
8 changed files with 43 additions and 11 deletions

View file

@ -66,6 +66,8 @@
var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] }); var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] });
$(colvis.button()).appendTo('div.colvis-button-bar'); $(colvis.button()).appendTo('div.colvis-button-bar');
clearSearchButton('history_table', history_table);
$('#row-edit-mode').click(function() { $('#row-edit-mode').click(function() {
if ($(this).hasClass('active')) { if ($(this).hasClass('active')) {
$('.delete-control').each(function() { $('.delete-control').each(function() {

View file

@ -43,6 +43,8 @@
} }
history_table = $('#history_table').DataTable(history_table_modal_options); history_table = $('#history_table').DataTable(history_table_modal_options);
clearSearchButton('history_table', history_table);
}); });
</script> </script>
% else: % else:

View file

@ -267,6 +267,8 @@ DOCUMENTATION :: END
var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] }); var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] });
$(colvis.button()).appendTo('div.colvis-button-bar'); $(colvis.button()).appendTo('div.colvis-button-bar');
clearSearchButton('history_table', history_table);
}); });
</script> </script>
% elif data['type'] == 'show': % elif data['type'] == 'show':
@ -285,6 +287,8 @@ DOCUMENTATION :: END
history_table = $('#history_table').DataTable(history_table_options); history_table = $('#history_table').DataTable(history_table_options);
var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] }); var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] });
$(colvis.button()).appendTo('div.colvis-button-bar'); $(colvis.button()).appendTo('div.colvis-button-bar');
clearSearchButton('history_table', history_table);
}); });
</script> </script>
% endif % endif
@ -303,7 +307,7 @@ DOCUMENTATION :: END
</script> </script>
% endif % endif
<script> <script>
$("#airdate").html($.datepicker.formatDate('M dd, yy', new Date($("#airdate").html()))); $("#airdate").html(moment($("#airdate")).format('MMM DD, YYYY'));
$("#runtime").html(millisecondsToMinutes($("#runtime").html(), true)); $("#runtime").html(millisecondsToMinutes($("#runtime").html(), true));
</script> </script>
% endif % endif

View file

@ -348,3 +348,12 @@ Accordion.prototype.dropdown = function(e) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open'); $el.find('.submenu').not($next).slideUp().parent().removeClass('open');
}; };
} }
function clearSearchButton(tableName, table) {
$('#' + tableName + '_filter').find('input[type=search]')
.wrap('<div class="input-group" role="group" aria-label="Search"></div>')
.after('<span class="input-group-btn"><button class="btn btn-form" data-toggle="button" aria-pressed="false" autocomplete="off" id="clear-search-' + tableName + '"><i class="fa fa-remove"></i></button></span>')
$('#clear-search-' + tableName).click(function() {
table.search('').draw();
});
}

View file

@ -86,6 +86,7 @@ from plexpy import helpers
$(document).ready(function() { $(document).ready(function() {
LoadPlexPyLogs(); LoadPlexPyLogs();
clearSearchButton('log_table', log_table);
}); });
function LoadPlexPyLogs() { function LoadPlexPyLogs() {
@ -105,11 +106,13 @@ from plexpy import helpers
$("#plexpy-logs-btn").click(function() { $("#plexpy-logs-btn").click(function() {
$("#clear-logs").show(); $("#clear-logs").show();
LoadPlexPyLogs(); LoadPlexPyLogs();
clearSearchButton('log_table', log_table);
}); });
$("#plex-logs-btn").click(function() { $("#plex-logs-btn").click(function() {
$("#clear-logs").hide(); $("#clear-logs").hide();
LoadPlexLogs(); LoadPlexLogs();
clearSearchButton('plex_log_table', plex_log_table);
}); });
$("#clear-logs").click(function() { $("#clear-logs").click(function() {

View file

@ -57,9 +57,10 @@
"url": "get_sync" "url": "get_sync"
} }
sync_table = $('#sync_table').DataTable(sync_table_options); sync_table = $('#sync_table').DataTable(sync_table_options);
var colvis = new $.fn.dataTable.ColVis( sync_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark' } ); var colvis = new $.fn.dataTable.ColVis( sync_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark' } );
$( colvis.button() ).appendTo('div.colvis-button-bar'); $( colvis.button() ).appendTo('div.colvis-button-bar');
clearSearchButton('sync_table', sync_table);
}); });
</script> </script>
</%def> </%def>

View file

@ -314,6 +314,8 @@ from plexpy import helpers
var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] }); var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] });
$(colvis.button()).appendTo('#button-bar-history'); $(colvis.button()).appendTo('#button-bar-history');
clearSearchButton('history_table', history_table);
}); });
$( "#ip-tab-btn" ).one( "click", function() { $( "#ip-tab-btn" ).one( "click", function() {
@ -329,6 +331,8 @@ from plexpy import helpers
} }
} }
user_ip_table = $('#user_ip_table').DataTable(user_ip_table_options); user_ip_table = $('#user_ip_table').DataTable(user_ip_table_options);
clearSearchButton('user_ip_table', user_ip_table);
}); });
$( "#sync-tab-btn" ).one( "click", function() { $( "#sync-tab-btn" ).one( "click", function() {
@ -341,10 +345,12 @@ from plexpy import helpers
} }
} }
sync_table = $('#sync_table').DataTable(sync_table_options); sync_table = $('#sync_table').DataTable(sync_table_options);
history_table.column(1).visible(false); sync_table.column(1).visible(false);
var colvis_sync = new $.fn.dataTable.ColVis( sync_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark' } ); var colvis_sync = new $.fn.dataTable.ColVis( sync_table, { buttonText: '<i class="fa fa-columns"></i> Select columns', buttonClass: 'btn btn-dark' } );
$( colvis_sync.button() ).appendTo('#button-bar-sync'); $( colvis_sync.button() ).appendTo('#button-bar-sync');
clearSearchButton('sync_table', sync_table);
}); });
// Load edit user modal // Load edit user modal

View file

@ -41,6 +41,7 @@
<script src="interfaces/default/js/moment-with-locale.js"></script> <script src="interfaces/default/js/moment-with-locale.js"></script>
<script src="interfaces/default/js/tables/users.js"></script> <script src="interfaces/default/js/tables/users.js"></script>
<script> <script>
$(document).ready(function() {
users_list_table_options.ajax = { users_list_table_options.ajax = {
"url": "get_user_list", "url": "get_user_list",
type: "post", type: "post",
@ -49,7 +50,11 @@
} }
} }
var users_list_table = $('#users_list_table').DataTable(users_list_table_options); users_list_table = $('#users_list_table').DataTable(users_list_table_options);
clearSearchButton('users_list_table', users_list_table);
});
$("#refresh-users-list").click(function() { $("#refresh-users-list").click(function() {
$.ajax({ $.ajax({