Posts

Showing posts with the label Datatable

Apply datatable tooltip to the datatable cell by jquery- if confliction with jquery-ui appear

Apply datatable tooltip to the datatable cell by jquery- if confliction with jquery-ui appear we are doing this by pageX and pageY event of jquery. and in this example we are also excluding last  td  of the datatable, means we are not implementing tooltip to the last td of the each tr. css==> <style> #tooltip {   position: absolute;   z-index: 1001;   display: none;   border: 2px solid #ebebeb;   border-radius: 5px;   padding: 10px;   color:#fff;   background-color: #e0ae22; } #newcasemarktable tbody tr{cursor: pointer;} </style> HTML==> <div class="container">     <div class="col-sm-12">         <div id="tooltip"></div>           <table id="newcasemarktable" class="display" style="width:100%">   put your datatable here          </table> </div>   </...

Click on row except one specific td by jquery

<script type="text/javascript"> $(document).ready(function(){ $("#example").DataTable(); $("#example tbody").on("click","tr",function(e){ alert("clicked on tr"); var cell=$(e.target).closest('td'); if(cell.index()==5 ){ alert("Dont Run"); } else{alert("Run"); } }); }); \*\\\\\\\\\\\\\\\\\\\\\\\\\\Or you may use following also\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\ $(document).ready(function(){ $("#example").DataTable(); $("#example tbody").on("click","tr",function(e){ alert("clicked on tr"); var cell=$(e.target).closest('td'); if(cell.index()!= 5 ){  alert("Dont Run"); } }); }); </script> Download Demo Code

datatable with both top and bottom scroll bar.

Image
HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>     <head>         <title></title>         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         <!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>          -->          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>         <script type="text/javascript" src="jquery.doubleScroll.js"></script>         <script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/j...