DataTable Archives - Codeplaners https://codeplaners.com/tag/datatable/ Code Solution Thu, 10 Feb 2022 12:03:23 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-32x32.png DataTable Archives - Codeplaners https://codeplaners.com/tag/datatable/ 32 32 How To Create DataTable In Bootstrap https://codeplaners.com/how-to-create-datatable-in-bootstrap/ https://codeplaners.com/how-to-create-datatable-in-bootstrap/#respond Thu, 10 Feb 2022 12:03:23 +0000 https://codeplaners.com/?p=1399 Hi Dev, Today, i we will show you how to create DataTable in bootstrap. This article will give you simple example of how to create DataTable in bootstrap. you will how to create DataTable in bootstrap. In this article, we will implement a how to create DataTable in bootstrap. So let’s follow few step to … Continue reading "How To Create DataTable In Bootstrap"

The post How To Create DataTable In Bootstrap appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you how to create DataTable in bootstrap. This article will give you simple example of how to create DataTable in bootstrap. you will how to create DataTable in bootstrap. In this article, we will implement a how to create DataTable in bootstrap.

So let’s follow few step to create example of how to create DataTable in bootstrap.

How To Create DataTable In Bootstrap

Example

<!DOCTYPE html>
<html>

<head>
	<title> How To Create DataTable In Bootstrap</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" >
	<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" >
	
</head>

<body>
   
	
    <div class="container" style="padding: 20px 0 0;">
        <table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>San Francisco</td>
                    <td>66</td>
                    <td>2009/01/12</td>
                    <td>$86,000</td>
                </tr>
               
            </tbody>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
        </table>
    </div>
    
	<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
	<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
	<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>

	<script>

		$(document).ready(function() {
			$('#example').DataTable();
		} );
	</script>

</body>

</html>

I hope it will assist you…

The post How To Create DataTable In Bootstrap appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-create-datatable-in-bootstrap/feed/ 0