siddharth_application/application/views/publicholidays.php

 <?php
 // print_r($month);
 // echo "-------------";
//  print_r($days);
 //$sample = array_merge($month,$fresh);

 ?>

<script src="<?php echo base_url()?>assets/lightswitch/lightswitch/lib/jquery.tabletojson.js"></script>
<script src="<?php echo base_url()?>assets/lightswitch/lightswitch/lib/jquery.tabletojson.min.js"></script> 


 
 
</script> 
<script>
$(function() {
	  
  $("#hdate").datepicker({
	dateFormat: 'dd-mm-yy',changeMonth: true, changeYear: true,yearRange: '-100:+0'
});
});
$('html').bind('keypress', function(e)
{
	//alert('Key Pressed');
   if(e.keyCode == 13)
   {
      return false;
   }
});

</script>

<style type="text/css">
  .num {
  text-align:right;
}
</style>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
       <center>Public Holiday Information  - <?php echo date('Y');?></center>
      </h1>
    </section>
    <section class="content">
     
       
        <div class="row">
            <div class="col-xs-12">
              <div class="box">
                <div class="box-header">
                    <!--<center><h3 class="box-title">-->
                      <div class="box-tools">
                     
                          
                    </div><!--</h3></center>-->
                    
                </div><!-- /.box-header -->
            <div class="col-md-12">
            <div class="col-md-4">
			   <span>Holiday Name : </span>
			   <input type="text" name="hname" id="hname">
			   </div>
			    <div class="col-md-4">
				<span>Date : </span>
			   <input type="text" name="hdate" id="hdate">
			   </div>
			    <div class="col-md-3">
				 <input type="button" id="Add" value = "Add" class="btn btn-primary"	>
			   </div>
			   </div>
			   <p>&nbsp;</p>
                <div class="box-body">
                  <table id="phdays" class="table table-bordered table-hover" style="background-color:#fff;font-size:12px;">
                  <thead style="background-color:#ddf">
                    <tr>
                   
                      <!-- <th>S.No</th> -->
					  <th>Holiday_Name</th>
					  <th>Date</th>
					  <th style="width:10%";>Action</th> 
                      
                    </tr>
                    </thead>
					<tbody id="db">
					
                    <?php
					
					
					$index=0;
					$testarray=array();
					
					
					
                    if(!empty($days))
                    {
						foreach($days as $day)
                        
						{
							$index++;
							$date = date_create($day->H_Date);
							$date = date_format($date,'d-m-Y');
                    ?>	
                    
                    <tr id="<?php echo $index;?>">
					 <!--  <td style="text-align:right;"><?php echo $index ?></td> -->
                      
					  <td contenteditable='true' style="text-align:left;"><?php  if(!empty($day->H_Name)){echo $day->H_Name;}else{echo "NO DATA";}?></td>
					  <td contenteditable='false' style="text-align:right;"><?php  echo $date;?></td>
                      <td style="text-align:right;"><a href='#' onclick = "DeleteRow(<?php echo $index ; ?>)" id="Del" ><span class="glyphicon glyphicon-trash"></span></a></td>
				  
                    </tr>

                    <?php
						}
                        }
						
                    
					
					
                    ?>
					</tbody>
					
                  </table>
				  <p>&nbsp;</p>
                    <div class="row">
                 <div class="col-md-4" id="savebutton">
				 <input type="button" id="submit" value = "Save" class="btn btn-primary">
				
				 </div>
				  
				 </div> 
                </div><!-- /.box-body -->
               <!--  <div class="box-footer clearfix">
                    
                </div> -->
              </div><!-- /.box -->
            </div>
        </div>
    </section>
</div>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/common.js" charset="utf-8"></script>
<script type="text/javascript">
    $(function () {
  
    $('#phdays').DataTable({
      "paging": true,
      "lengthChange": true,
      "searching": true,
      "ordering": false,
    // "aaSorting": [[ 0, "asc" ]],
      "info": true,
      "autoWidth": true
     
    }); 
  });
</script>
<script type="text/html" id="addList">
<tr  id="<%=index%>">
 <td style="text-align:left;" contenteditable="true"><%=Holiday_Name%></td>
 <td style="text-align:right;"  contenteditable="false"><%=Date%></td>
 <td style="text-align:right;">
 <a href='#' onclick = "DeleteRow(<?php echo $index ; ?>)" id="Del" ><span class="glyphicon glyphicon-trash"></span></a>
 </td>
 </tr>  
</script>  
  
<script>
function DeleteRow(rowid)
{
	var d='';
	//alert(rowid);
	var tr = document.getElementById(rowid);
	var Row = $('#phdays').find('tr').eq(rowid).find('td');
	 $.each(Row,function(index,value){
	     if(index == 1 ){
		  d = value.textContent
		 }
	 });
	// alert(d);
	 $('#content').loader('show');
         $.ajax({
              data:{param1:d},
              type:"POST",
              url:"<?php echo base_url() ?>monthlypay/deletePublicHoliday",
                    
                success:function(data){
                    $('#content').loader('hide'); 
					alert(data);	
              }

          });
	tr.parentNode.removeChild(tr);
}
$('#Add').click(function(){
    
    var index = $('#phdays tr').length;
	//alert(index);
	var temp = index;
     var H_name = $('#hname').val();
     var H_date = $('#hdate').val();
     
   
     
     if(H_name != '' && H_date != '')
     {
        var template = jQuery("#addList").html();
        index = parseInt(index);   
        $('#db').append(_.template(template,{index:temp,Holiday_Name:H_name,Date:H_date}));   
        var tablevalue = $('#phdays').tableToJSON(); // Convert the table into a javascript object
        var value = JSON.stringify(tablevalue);
		$('#hname').val('');
        $('#hdate').val('');
      }
      
    });

$('#submit').click(function(){
	
	var jsondata = $('#phdays').tableToJSON();
	var jsondata = JSON.stringify(jsondata);
	
	$('#content').loader('show');
         $.ajax({
              data:{param1:jsondata},
              type:"POST",
              url:"<?php echo base_url() ?>monthlypay/savePublicHolidays",
                    
                success:function(data){
                    $('#content').loader('hide'); 
					alert(data);	
              }

          });
	
});

</script>