Created
May 21, 2016 03:38
-
-
Save pawl/1a2fc5554f0528eda620c3900a27527d to your computer and use it in GitHub Desktop.
datatables no error popups
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title></title> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content=""> | |
| <meta name="author" content=""> | |
| <link href="/static/admin/bootstrap/bootstrap3/css/bootstrap.min.css?v=3.3.5" rel="stylesheet"> | |
| <link href="/static/admin/bootstrap/bootstrap3/css/bootstrap-theme.min.css?v=3.3.5" rel="stylesheet"> | |
| <link href="/static/admin/admin/css/bootstrap3/admin.css?v=1.1.1" rel="stylesheet"> | |
| <style> | |
| body { | |
| padding-top: 4px; | |
| } | |
| </style> | |
| <link href="/static/vendor/DataTables/media/css/dataTables.bootstrap.min.css?v=1.5.6" rel="stylesheet"> | |
| <link href="/static/vendor/DataTablesEditor/css/editor.bootstrap.min.css?v=1.5.6" rel="stylesheet"> | |
| <link href="/static/vendor/DataTables/extensions/KeyTable/css/keyTable.dataTables.min.css?v=2.1.2" rel="stylesheet"> | |
| <link href="/static/vendor/DataTables/extensions/Select/css/select.bootstrap.min.css?v=1.2.0" rel="stylesheet"> | |
| <link href="/static/vendor/DataTables/extensions/Buttons/css/buttons.bootstrap.min.css?v=1.2.0" rel="stylesheet"> | |
| <script src="/static/admin/vendor/jquery.min.js?v=2.1.4" type="text/javascript"></script> | |
| <script src="/static/admin/bootstrap/bootstrap3/js/bootstrap.min.js?v=3.3.5" type="text/javascript"></script> | |
| <script src="/static/vendor/DataTables/media/js/jquery.dataTables.min.js?v=1.10.12"></script> | |
| <script src="/static/vendor/DataTables/media/js/dataTables.bootstrap.min.js?v=1.10.12"></script> | |
| <script src="/static/vendor/DataTables/extensions/KeyTable/js/dataTables.keyTable.min.js?v=2.1.2"></script> | |
| <script src="/static/vendor/DataTables/extensions/Buttons/js/dataTables.buttons.min.js?v=1.2.0"></script> | |
| <script src="/static/vendor/DataTables/extensions/Buttons/js/buttons.bootstrap.min.js?v=1.2.0"></script> | |
| <script src="/static/vendor/DataTables/extensions/Select/js/dataTables.select.min.js?v=1.2.0"></script> | |
| <script src="/static/vendor/DataTablesEditor/js/dataTables.editor.min.js?v=1.5.6"></script> | |
| <script src="/static/vendor/DataTablesEditor/js/editor.bootstrap.min.js?v=1.5.6"></script> | |
| <script> | |
| $(document).ready(function() { | |
| // turns datatables edit requests into something easier for flask to parse | |
| function format_to_json(data) { | |
| return {'args': JSON.stringify(data)}; | |
| } | |
| var editor = new $.fn.dataTable.Editor({ | |
| ajax: { | |
| edit: { | |
| url: "/api/update_product_attribute", | |
| data: format_to_json | |
| }, | |
| remove: { | |
| url: "/api/hide_products", | |
| data: format_to_json | |
| }, | |
| }, | |
| table: "#cheaptable", | |
| i18n: { | |
| "error": { | |
| "system": "A system error has occurred." // remove datatables url | |
| } | |
| }, | |
| fields: [{ | |
| label: "Sheet Height", | |
| name: "attributes.sheet_height" | |
| }, { | |
| label: "Sheets", | |
| name: "attributes.sheets" | |
| }, { | |
| label: "Sheet Width", | |
| name: "attributes.sheet_width" | |
| }, { | |
| label: "Rolls", | |
| name: "attributes.rolls" | |
| }] | |
| }); | |
| // Activate an inline edit on click of an .editable table cell | |
| $('#cheaptable').on('click', 'tbody td.editable', function (e) { | |
| editor.inline(this); | |
| }); | |
| var table = $('#cheaptable').dataTable({ | |
| dom: 'Bfrtip', // select won't work without this | |
| sAjaxSource: '/api/products?show_incomplete=0&type_id=1', | |
| paging: false, | |
| searching: false, | |
| bInfo : false, // hide "Showing 1 of N entries" at bottom of table | |
| order: [[8, 'asc' ]], // sort on last column | |
| keys: { | |
| columns: '.editable' // only allow excel-like operations on editable columns | |
| }, | |
| select: { | |
| style: 'multi', // enables multiselect on first click (without shift) | |
| selector: 'td:first-child' | |
| }, | |
| buttons: [ | |
| {extend: "remove", editor: editor, text: 'Remove Selected'}, | |
| { | |
| text: 'Show Incomplete', | |
| className: '', | |
| action: function (e, dt, node, config) { | |
| window.location.href = '/product_grid/?show_incomplete=1&type_id=1'; | |
| } | |
| } | |
| ], | |
| columns: [ | |
| {data: null, | |
| defaultContent: '', | |
| className: 'select-checkbox', | |
| orderable: false, | |
| width: "12px"}, // will default to width 0px without this | |
| {data: "name", | |
| render: function (data, type, full, meta) { | |
| return '<a href="' + full.url + '">' + data + '</a>'; // formats name column as link | |
| } | |
| }, | |
| {data: "attributes.sheet_height", className: 'editable'}, | |
| {data: "attributes.sheets", className: 'editable'}, | |
| {data: "attributes.sheet_width", className: 'editable'}, | |
| {data: "attributes.rolls", className: 'editable'}, | |
| {data: "price", type: "num-fmt"}, | |
| {data: "shipping", type: "num-fmt"}, | |
| {data: "unit_price", type: "num-fmt"} | |
| ] | |
| }); | |
| // submit editable when the user presses tab | |
| table.on('key-focus', function(e, datatable, cell) { | |
| editor.inline(cell.index(), { | |
| onBlur: 'submit' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <nav class="navbar navbar-default" role="navigation"> | |
| <!-- Brand and toggle get grouped for better mobile display --> | |
| <div class="navbar-header"> | |
| <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#admin-navbar-collapse"> | |
| <span class="sr-only">Toggle navigation</span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| <span class="icon-bar"></span> | |
| </button> | |
| <a class="navbar-brand" href="/"></a> | |
| </div> | |
| <!-- navbar content --> | |
| <div class="collapse navbar-collapse" id="admin-navbar-collapse"> | |
| <ul class="nav navbar-nav"></ul> | |
| <ul class="nav navbar-nav navbar-right"></ul> | |
| <div class="pull-right"> | |
| <a class="btn btn-sm btn-primary navbar-btn" href="/register/">Register</a> | |
| <a class="btn btn-sm btn-primary navbar-btn" href="/login/">Log in</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <table class='table table-striped table-bordered' id='cheaptable' cellspacing='0' width='100%'> | |
| <thead> | |
| <tr> | |
| <th></th> <!-- Checkbox Column --> | |
| <th>Name</th> | |
| <th>Sheet Height</th> | |
| <th>Sheets</th> | |
| <th>Sheet Width</th> | |
| <th>Rolls</th> | |
| <th>Price</th> | |
| <th>Shipping</th> | |
| <th>Unit Price</th> | |
| </tr> | |
| </thead> | |
| </table> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment