system: Linux mars.sprixweb.com 3.10.0-1160.119.1.el7.x86_64 #1 SMP Tue Jun 4 14:43:51 UTC 2024 x86_64

cmd: 

<script type="text/javascript" language="javascript" >
			$(document).ready(function() {
				var dataTable = $('#employee-grid').DataTable( {
					"dom": '<"top">rt<"left"i><"toolbar"p>',
					"processing": true,
					"serverSide": true,
					"ajax":{
						url :"?do=members&action=getmemberslist", // json datasource
						type: "post",  // method  , by default get
						error: function(){  // error handling
							$(".employee-grid-error").html("");
							$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
							$("#employee-grid_processing").css("display","none");
							
						}
					}
				} );
				
				$("#employee-grid_filter").css("display","none");  // hiding global search box
				$('.search-input-text').on( 'keyup', function () {   // for text boxes
					var i =$(this).attr('data-column');  // getting column index
					var v =$(this).val();  // getting search input value
					dataTable.columns(i).search(v).draw();
					$('#consumerNO'+i).show();
					if(v==''){$('#consumerNO'+i).hide();}
					
					
					$('#consumerNO'+i).on( "click", function() {
					  $('#consumerNO'+i).hide();
					   
					});


					
				} );
				
				
				$('.search-input-select').on( 'change', function () {   // for select box
					var i =$(this).attr('data-column');  
					var v =$(this).val();  
					dataTable.columns(i).search(v).draw();
				} );
				
				
				
			} );
</script>
<style>
.toolbar {
    float: right;
	margin-top:-25px;
}
</style>
<div class="container-fluid">
  <div class="row content">    
    <div class="col-sm-9">
		<div class="page-header">
			<h4><span class="glyphicon glyphicon-search"></span> Search Members</h4>
		</div>
		<div class="row">							
						<div class="form-group col-md-6">
							<label class="control-label col-sm-4" for="email">Consumer No.</label>
							<div class="col-sm-8">
							  <input type="text" data-column="0"  class="form-control search-input-text" placeholder="Enter Consumer Number">
							  <span class="glyphicon glyphicon-remove form-control-feedback" id="consumerNO0" style="display:none; color:red; "></span>
							</div>
						</div>
						<div class="form-group col-md-6">
							<label class="control-label col-sm-4" for="email">Consumer Name</label>
							<div class="col-sm-8">
							     <input type="text" data-column="1" class="search-input-text form-control" placeholder="Enter Consumer Name">
								 <span class="glyphicon glyphicon-remove form-control-feedback" id="consumerNO1" style="display:none; color:red; "></span>
							</div>
						</div>					
					</div>
		
	<table id="employee-grid" class="table table-striped table-bordered" cellspacing="0" width="100%">
					<thead>
						<tr>
							<tr>
								<th width="130px">I Card No</th>
								<th>Name</th>
								<th>Mobile Number</th>
								<th>Village/City</th>
								<th>Status</th>
								<th width="70px">Action's</th>
							</tr>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<th colspan="6" id="demo">Search</th>
							
						</tr>
					</tfoot>
				
			</table>
    </div>
	<div class="col-sm-3">
		<div class="panel panel-default">
		  <div class="panel-heading">Panel Heading</div>
		  <div class="panel-body">Panel Content</div>
		</div>
    </div>
  </div>
</div>