Datatables with bootstrap modal inside the cell

It is just an example with dummy data, you can extend it by using dynamic data

by Swapnil Dubey

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.0.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.0.1/js/responsive.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.0.1/css/responsive.bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-primary">
  <div class="panel-heading text-center">
    <font size="2"><strong>Heading </strong></font>
  </div>
  <div class="panel-body">
    <div class="row">
      <div class="col-xs-12">
        <font color="Red" size="2">All fields marked with * are mandatory</font>
      </div>
    </div>
    <div class="form-group">
      <div class="row">
        <div class="col-xs-2">
          NAme
          <font color="Red" size="2">*</font>
        </div>
        <div class="col-xs-4">
          <input type="text" name="roleName" id="roleName" maxlength="100" class="form-control" onblur="chkUniq();" onkeypress=" if (event.keyCode == 13) if(!chkUniq()){ return event.keyCode != 13}" align="center">
        </div>
        <div class="col-xs-2">
          Description
          <font color="Red" size="2">*</font>
        </div>
        <div class="col-xs-4">
          <textarea name="roleDesc" class="form-control" id="roleDesc" onkeyup="chkMaxLen();" onchange="chkMaxLenPaste()"></textarea>
        </div>
      </div>
    </div>

    <div class="form-group">
      <div class="row">
        <div class="col-xs-2">
       ...

JavaScript

$(document).ready(function() {
  $('#example').DataTable();
});