locked
Grid with Paging , Sorting . RRS feed

  • Question

  • User1979860870 posted

    Hi

      How to create Grid like image attached with paging , Search , No of Records options

    https://imgur.com/l25ZWS2

    <div class="container">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New Location</button><br /><br />
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>
                        Code
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Street
                    </th>
                    <th>
                        City
                    </th>
                    <th>
                        Action
                    </th>
                </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
        </table>
    </div>

    Thanks

    Wednesday, January 20, 2021 3:48 AM

Answers

  • User1312693872 posted

    Hi,jagjit saini

    The form is bootstrap DataTables, this is a demo:

    <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>Code</th>
                <th>Name</th>
                <th>Street</th>
                <th>City</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Json</td>
                <td>NY111</td>
                <td>NY</td>
                <td><button type="button" class="btn btn-danger">Edit</button></td>
            </tr>
            
            <tr>
                <td>2</td>
                <td>Jack</td>
                <td>NY112</td>
                <td>NY</td>
                <td><button type="button" class="btn btn-danger">Edit</button></td>
            </tr>       
        </tbody>
    </table>
    
    @section Scripts
    {
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
        <script>
        $(document).ready(function () {
            $('#example').DataTable();
        });
        </script>
    }
    
    

    Result:

    And this is the official site:

    https://datatables.net/examples/styling/bootstrap4

    Best Regards,

    Jerry Cai

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 20, 2021 8:07 AM