Jquery Datatable - Pagination

-
 <html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Language">
<meta http-equiv="Content-Type" content="text/html">
<meta name="author" content="Bhavin Patel" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<title>MY LINKS</title>
<script type="text/javascript">
  $(document).ready(function() {
    $('#example').DataTable();
$('#exampleMenu1').DataTable();
$('#exampleMenu2').DataTable();
$('#exampleMenu3').DataTable();
} );
</script>

</head>

<body >
<div class="container">
  <div class="row">  
  <h3 style="color:red; text-decoration: underline;">HEADING</h3>
  
  <ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">TAB-1</a></li>
    <li><a data-toggle="tab" href="#menu1">TAB-2</a></li>
    <li><a data-toggle="tab" href="#menu2">TAB-3</a></li>
    <li><a data-toggle="tab" href="#menu3">TAB-4</a></li>
  </ul>
  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <div class="col-sm-12">  
  <table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>TITLE</th>
                <th>URL-LINK</th>
            </tr>
        </thead>
        <tbody>

 <tr>
                <td>UAN - Provident Fund (PF-Passbook)</td>
                <td><a href="https://passbook.epfindia.gov.in/MemberPassBook/Login.jsp" class="btn btn-info btn-sm"> Click Here </a></td>
            </tr>

 <tr>
                <td>UAN - Provident Fund (PF-Portal)</td>
                <td><a href="https://unifiedportal-mem.epfindia.gov.in/memberinterface/" class="btn btn-info btn-sm"> Click Here </a></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>TITLE</th>
                <th>URL-LINK</th>
            </tr>
        </tfoot>
    </table>
</div>
    </div>
    <div id="menu1" class="tab-pane fade">
      <div class="col-sm-12">  
  <table id="exampleMenu1" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>APPLICATION NAME </th>
                <th>URL-LINK</th>
            </tr>
        </thead>
        <tbody>




        </tbody>
        <tfoot>
            <tr>
                <th>APPLICATION NAME </th>
                <th>URL-LINK</th>
            </tr>
        </tfoot>
    </table>
</div>
    </div>
    <div id="menu2" class="tab-pane fade">
      <div class="col-sm-12">  
  <table id="exampleMenu2" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>PORAL - APPLICATION - TITLE</th>
                <th>URL-LINK</th>
            </tr>
        </thead>
        <tbody>
            

        </tbody>
        <tfoot>
            <tr>
                <th>PORAL - APPLICATION - TITLE</th>
                <th>URL-LINK</th>
            </tr>
        </tfoot>
    </table>
</div>
    </div>
    <div id="menu3" class="tab-pane fade">
      <div class="col-sm-12">  
  <table id="exampleMenu3" class="table table-striped table-bordered" style="width:100%">
        <thead>
            <tr>
                <th>PORAL - APPLICATION - TITLE</th>
                <th>URL-LINK</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <th>PORAL - APPLICATION - TITLE</th>
                <th>URL-LINK</th>
            </tr>
        </tfoot>
    </table>
</div>
    </div>
  </div>
  
  
  
  
  

  </div>
</div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

PUTTY - The server's host key is not cached in the registry cache

-
Error: "The server's host key is not cached in the registry. You have no guarantee that the server is the computer you think it is. The server's rsa2 key fingerprint is: [SSH KEY FINGERPRINT] If you trust this host, enter "y" to add the key to PuTTY's cache and carry on connecting. If you want to carry on connecting just once, without adding the key to the cache, enter "n". If you do not trust this host, press Return to abandon the connection. Store key in cache? (y/n) y" Answer: Simply run this command in your windows preferred terminal (cmd.exe etc) and agree to accept the host and store the cache: C:\Program Files (x86)\PuTTY\plink.exe -ssh [SSH USERNAME]@[SSH HOST] -P [SSH PORT] echo y | pscp -i /path/to/key/file user@remote:/tmp/file  . echo y | plink -i /path/to/key/file scripts.sh Usually you would hit “y” here, assuming the host key is correct, in order to store it in future connection.  The storage of this goes into the Registry under ...
Read more

OIM-12c Installation - FMW - SOA - IDM

-
Image
Oracle Identity Manager (OIM) 12c Installation Prerequisites: The Oracle Identity Manager software includes the following: 1] Oracle's Java Development Kit (JDK) 1.8 (jdk-8u311-linux-x64.tar.gz) 2]  Fusion Middleware 12.2.1.4.0 3]  SOA Suite 12.2.1.4.0 4] Oracle Identity and Access Management  12.2.1.4.0 What Do You Need? For completing Oracle IDM Setup you will need, Environment as below: Oracle Enterprise Linux 6 or similar, with access to the Internet At least 8GB RAM (16GB recommended) An Oracle Database Enterprise Edition 12 or superior installed and running. Note: Installing a Database for Identity and Access Management (IDM) Suite provides instructions on how to install an Oracle Database that is suitable for Oracle Identity and Access Management Suite. oracle and root user credentials SYS database user credentials Basic understanding of Linux An Oracle Technology Network (OTN) account OIM-11g PS3 Installation Steps: Just for reference https://www.oracle.com/webfol...
Read more

Apache Kafka - Zookeeper

-
Apache Kafka - Zookeeper Tutorial Topics covered in this article as below: Need of Messaging System What is Kafka? Kafka Features Kafka Components Kafka Architecture Installing Kafka Working with Single Node Broker Cluster 1. Need of Messaging System Data pipelines - Communication is required between different systems in the real-time scenario, which is done by using data pipelines Chat Server -----------Data Pipeline---------------> Database server Many services are communicating with various internal systems like front-end, back-end Api, database server, security system, real-time monitoring, chat server etc. Messaging systems helps managing complexity of above pipelines. so Kafka helps here to decouples data pipelines Key entity involved in Kafka Producer (Publisher) Consumer (Subscriber) 2. What is Kafka? (High throughput distributed messaging system) Apache Kafka is a distributed publish-subscribe messaging system It was originally developed at Linked-In and later became part ...
Read more