<!doctype html>
<html lang="en">
    <head>
        <?php $title = "Javascript Source Datatables"; include('./partials/title-meta.php'); ?>

        <!-- Datatables css -->
        <link href="assets/plugins/datatables/responsive.bootstrap5.min.css" rel="stylesheet" type="text/css" />

        <?php include('./partials/head-css.php'); ?>
    </head>

    <body>
        <!-- Begin page -->
        <div class="wrapper">
            <?php include('./partials/topbar.php'); ?> <?php include('./partials/sidenav.php'); ?>

            <!-- ============================================================== -->
            <!-- Start Main Content -->
            <!-- ============================================================== -->

            <div class="content-page">
                <div class="container-fluid">
                    <?php $subtitle = "DataTables"; $title = "Javascript Source"; include('./partials/page-title.php'); ?>

                    <div class="row justify-content-center">
                        <div class="col-xxl-10">
                            <div class="card">
                                <div class="card-header justify-content-between">
                                    <h4 class="card-title">Example</h4>
                                    <a href="https://datatables.net/examples/data_sources/js_array.php" target="_blank" class="icon-link icon-link-hover link-primary fw-semibold">
                                        View Docs
                                        <i class="ti ti-arrow-right bi align-middle fs-lg"></i>
                                    </a>
                                </div>

                                <div class="card-body">
                                    <div class="alert alert-warning alert-dismissible fade show mb-4" role="alert">
                                        <strong>Note:</strong>
                                        This is a jQuery-based plugin, so you need to include jQuery for it to work.
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>

                                    <table id="datatables-javascript-source" class="table table-striped dt-responsive align-middle mb-0">
                                        <thead class="thead-sm text-uppercase fs-xxs">
                                            <tr>
                                                <th>Company</th>
                                                <th>Symbol</th>
                                                <th>Price</th>
                                                <th>Change</th>
                                                <th>Volume</th>
                                                <th>Market Cap</th>
                                                <th>Rating</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                                <!-- end card-body-->
                            </div>
                            <!-- end card-->
                        </div>
                        <!-- end col-->
                    </div>
                    <!-- end row-->
                </div>
                <!-- container -->

                <?php include('./partials/footer.php'); ?>
            </div>

            <!-- ============================================================== -->
            <!-- End of Main Content -->
            <!-- ============================================================== -->
        </div>
        <!-- END wrapper -->

        <?php include('./partials/customizer.php'); ?> <?php include('./partials/footer-scripts.php'); ?>

        <!-- Jquery for Datatables-->
        <script src="assets/plugins/jquery/jquery.min.js"></script>

        <!-- Datatables js -->
        <script src="assets/plugins/datatables/dataTables.min.js"></script>
        <script src="assets/plugins/datatables/dataTables.bootstrap5.min.js"></script>
        <script src="assets/plugins/datatables/dataTables.responsive.min.js"></script>
        <script src="assets/plugins/datatables/responsive.bootstrap5.min.js"></script>

        <!-- Page js -->
        <script src="assets/js/pages/datatables-javascript-source.js"></script>
    </body>
</html>
