Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Keep datatable state in the browser history. #1986

Merged
merged 3 commits into from Jan 20, 2017
Merged

Keep datatable state in the browser history. #1986

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd6f962
Keep datatable state in the browser history.
nmb10 Jan 12, 2017
9552d5f
Cosmetics.
nmb10 Jan 13, 2017
ac0b508
console.log removed.
nmb10 Jan 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions luigi/static/visualiser/index.html
View file
Open in desktop
Expand Up @@ -21,6 +21,7 @@
<script src="lib/jquery.slimscroll.min.js"></script>
<script src="lib/AdminLTE/js/app.min.js"></script>
<script src="lib/datatables/js/jquery.dataTables.min.js"></script>
<script src="lib/URI.js/1.18.2/URI.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Expand Down
49 changes: 49 additions & 0 deletions luigi/static/visualiser/js/visualiserApp.js
View file
Open in desktop
Expand Up @@ -850,6 +850,55 @@ function visualiserApp(luigi) {
});

dt = $('#taskTable').DataTable({
stateSave: true,
stateSaveCallback: function(settings, data) {
// Convert data table state to query and save to the browser history.
var params = {};

if (data.search.search) {
params.search__search = data.search.search;
}

if (data.order && data.order.length) {
params.order = '' + data.order[0][0] + ',' + data.order[0][1];
}

if (data.length) {
params.length = data.length;
}

var uri = URI().query(params);
history.pushState(data, 'task-table', uri.toString());
},
stateLoadCallback: function(settings) {
// Restore datatable state from browser's history.
var uri = URI(window.location).search(true);
var order = [];
if (uri.order) {
order = [uri.order.split(',')];
}

// Prepare state for datatable.
var o = {
order: order, // Table rows order.
length: uri.length, // Entries on page.
start: 0, // Pagination initial page.
time: new Date().getTime(), // Current time to help datatable.js to handle asynchronous.
columns: [
{visible: true, search: {}},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What are the 6 rows here? Can you comment on explaining this magic?

{visible: true, search: {}}, // Name column
{visible: true, search: {}}, // Details column
{visible: true, search: {}}, // Priority column
{visible: true, search: {}}, // Time column
{visible: true, search: {}} // Actions column
],
// Search input state.
search: {
caseInsensitive: true,
search: uri.search__search}};

return o;
},
dom: 'l<"#serverSide">frtip',
language: {
search: 'Filter table:'
Expand Down