title: Pagination to HTML table
body: <p>I have referred to several SO questions and answers. Still I could not find a solution for pagination to tables. Please someone provide me the appropriate javascript coding for pagination with necessary plugins(if any). My table is filled with data from API call. Thanks in advance</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns:margin-right="http://www.w3.org/1999/xhtml" xmlns:padding-bottom="http://www.w3.org/1999/xhtml"
        xmlns:width="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;title&gt;Telephone Extension Finder&lt;/title&gt;
      &lt;link href = "css/bootstrap.min.css" rel = "stylesheet"&gt;
      &lt;link href = "css/main.css" rel = "stylesheet"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css"&gt;
      &lt;script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
          &lt;div id = "tableDiv" class = "tab-pane fade in active"&gt;
              &lt;table  id = "myTable"
                      class= "table-responsive container table table-hover table-bordered table-striped"
                      style="width:35%; margin-right: 15%;"&gt;
                          &lt;thead style = "background-color: #800080; color: white;"&gt;
                              &lt;th style = "width: 5%"&gt;Name&lt;/th&gt;
                              &lt;th style = "width: 1.2%"&gt;Code&lt;/th&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;&lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
      &lt;script src = "js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src ="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src = "js/main.js"&gt;&lt;/script&gt;
      &lt;script src = "js/impExt.js"&gt;&lt;/script&gt;
      &lt;script src="js/confRoom.js"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Above is my HTML page</p>