File
Add library
Share
Login or Register
Help
HTMLSaved
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>View Database Table - WebTest</title>
  <!--
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css?v=AKvNjO3dCPPS0eSU1Ez8T2wI280i08yGycV9ndytL-c" />
    <link rel="stylesheet" href="/WebTest.styles.css?v=xyOsBLRyNkG2GsoapL-7JIUeROtEv0oKfp7j0uBvUy0" />
     
  -->
  
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
​
    <link href="https://cdn.datatables.net/v/bs5/dt-1.13.8/b-2.4.2/b-html5-2.4.2/datatables.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        tfoot input {
            width: 100%;
            padding: 3px;
            box-sizing: border-box;
        }
    </style>
 
</head>
<body>
    <header>
        <nav b-3df587pwrj class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div b-3df587pwrj class="container-fluid">
                <a class="navbar-brand" href="/">WebTest</a>
                <button b-3df587pwrj class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span b-3df587pwrj class="navbar-toggler-icon"></span>
                </button>
                <div b-3df587pwrj class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul b-3df587pwrj class="navbar-nav flex-grow-1">
                        <li b-3df587pwrj class="nav-item">
                            <a class="nav-link text-dark" href="/">Home</a>
                        </li>
                        <li b-3df587pwrj class="nav-item">
                            <a class="nav-link text-dark" href="/Home/Privacy">Privacy</a>
                        </li>
                    </ul>
                </div>
                <a class="navbar-brand" href="/Tables">Database Table</a>
            </div>
        </nav>
    </header>
    <div b-3df587pwrj class="container">
        <main b-3df587pwrj role="main" class="pb-3">
             
 
<br/><br/>
<h2 style="text-align: center;">fms.HDCTREASPF</h2>
<br/><br/>
<table id="tableData" class="display" style="width:100%">
    <thead>
        <tr>
                <th>testdecimal</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
                <th>testdecimal</th>
        </tr>
    </tfoot>
</table>
 
</main>
    </div>
    <footer b-3df587pwrj class="border-top footer text-muted">
        <div b-3df587pwrj class="container">
            &copy; 2023 - WebTest - <a href="/Home/Privacy">Privacy</a>
        </div>
    </footer>
  <!--
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
  -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
​
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/v/bs5/dt-1.13.8/b-2.4.2/b-html5-2.4.2/datatables.min.js"></script>
  <!--
    <script type="text/javascript" language="javascript" href="/JS/button.download.min.js"></script>
  -->
    <script>
      /*! © SpryMedia Ltd - datatables.net/license */
​
(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables.net'], function ( $ ) {
            return factory( $, window, document );
        } );
    }
    else if ( typeof exports === 'object' ) {
        // CommonJS
        var jq = require('jquery');
        var cjsRequires = function (root, $) {
            if ( ! $.fn.dataTable ) {
                require('datatables.net')(root, $);
            }
        };
​
        if (typeof window === 'undefined') {
            module.exports = function (root, $) {
                if ( ! root ) {
                    // CommonJS environments without a window global must pass a
                    // root. This will give an error otherwise
                    root = window;
                }
​
                if ( ! $ ) {
                    $ = jq( root );
                }
​
                cjsRequires( root, $ );
                return factory( $, root, root.document );
            };
        }
        else {
            cjsRequires( window, jq );
            module.exports = factory( jq, window, window.document );
        }
    }
    else {
        // Browser
        factory( jQuery, window, document );
    }
}(function( $, window, document, undefined ) {
'use strict';
var DataTable = $.fn.dataTable;
​
​
/**
 * @summary     Download Button
 * @author      SpryMedia Ltd (www.datatables.net)
 * @copyright   Copyright 2018 SpryMedia Ltd.
 *
 * License      MIT - http://datatables.net/license/mit
 *
 * A button that can be used to trigger a server-side action, typically a
 * download of a file generated by the server. If server-side processing
 * is enabled in the host table it will automatically add the last parameters
 * used for a table draw allowing the script to output a file with the same
 * order / search applied as the main table.
 *
 * This is particularly useful when using server-side processing and wishing
 * to allow user export of the data in a table. The default Buttons package
 * will only export the data available on the client-side, while this button
 * can be used to let the server generate the required file and then download
 * it to the client-side.
 *
 * @example
 *   // Download button
 *  var table = $('#example').DataTable({
 *      dom: 'Bfrtip',
 *      buttons: [
 *          {
 *              extend: 'download',
 *              url: '/api/download'
 *          }
 *      ]
 *  });
 */
function flattenJson(data, name, flattened) {
    if (!flattened) {
        flattened = {};
    }
    if (!name) {
        name = '';
    }
    if ($.isPlainObject(data) || Array.isArray(data)) {
        $.each(data, function (idx, val) {
            if (name === '') {
                flattenJson(val, idx, flattened);
            }
            else {
                flattenJson(val, name + '[' + idx.toString() + ']', flattened);
            }
        });
    }
    else {
        flattened[name] = data;
    }
    return flattened;
}
DataTable.ext.buttons.download = {
    text: 'Download',
    action: function (e, dt, node, config) {
        // Gather information to be submitted
        var data = {};
        if (dt.page.info().serverSide) {
            $.extend(data, dt.ajax.params());
        }
        if (typeof config.data === 'function') {
            config.data(data);
        }
        else if (typeof config.data === 'object') {
            $.extend(data, config.data);
        }
        // Convert data to a flat structure for submission
        var flattened = flattenJson(data);
        // Create an iframe
        var iframe = $('<iframe/>')
            .css({
            border: 'none',
            height: 0,
            width: 0,
        })
            .appendTo(document.body);
        var contentDoc = iframe[0].contentWindow.document;
        contentDoc.open();
        contentDoc.close();
        var form = $('<form/>', contentDoc)
            .attr('method', config.type)
            .attr('action', config.url)
            .appendTo(contentDoc.body);
        $.each(flattened, function (name, val) {
            $('<input/>', contentDoc)
                .attr('type', 'text')
                .attr('name', name.toString())
                .attr('autocomplete', 'no')
                .val(val)
                .appendTo(form);
        });
        form.submit();
    },
    url: '',
    type: 'POST',
    data: {},
};
​
​
return DataTable;
}));
  </script>
    <script>
        $(document).ready(function () {
            bindDatatable();
        });
 
        function bindDatatable() {
            datatable = $('#tableData')
                .DataTable({
                    "dom": "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'B>>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                    "processing": true, // for show progress bar
                    "serverSide": true, // for process server side
                    "filter": true, // this is to enable filter (search box)
                    "pageLength": 10,
                    "buttons": [
                        {
                         "extend": "download",
                         "url": "/ssp/objects.php",
                         "text": "CSV"
                        }
                    ],
                    ajax: {
                      url: '/ssp/objects.php',
                      type: 'post'
                    },
              
                    //"ajax": {
                    //    "url": "/Tables/LoadData",
                    //    "data": {
                    //        "rowCount": 12
                    //    },
                    //    "type": "POST",
                    //    "datatype": "json"
                    //},
                    "language": {
                        "emptyTable": "No record found.",
                        "processing":
                            '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="color:#2a2b2b;"></i><span class="sr-only">Loading...</span> '
                    },
                    initComplete: function () {
                        this.api()
                            .columns()
                            .every(function () {
                                let column = this;
                                let title = column.footer().textContent;
 
                                // Create input element
                                let input = document.createElement('input');
                                input.placeholder = title;
                                column.footer().replaceChildren(input);
 
                                // Event listener for user input
                                input.addEventListener('change', () => {
                                    if (column.search() !== this.value) {
                                        column.search(input.value).draw();
                                    }
                                });
                            });
                    },
                    "columns": [
 
                            {
                                "data": "first_name",
                                "autoWidth": true,
                                "searchable": true,
                            },                                                ]
                });
        }
    </script>
 
 
<!-- Visual Studio Browser Link -->
<script type="text/javascript" src="/_vs/browserLink" async="async" id="__browserLink_initializationData" data-requestId="a6de6718e1484026a5e95c0519dec13c" data-requestMappingFromServer="false" data-connectUrl="http://localhost:53999/96aad71a72a447edacd25c8980cbf734/browserLink"></script>
<!-- End Browser Link -->
 
<script src="/_framework/aspnetcore-browser-refresh.js"></script></body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers