EVOLUTION-NINJA
Edit File: address_list.php
<?php echo view('includes/header');?> <!-- <script src="<?php echo base_url('public/assets/admin_dashboard/js/jquery.imagemapster.js');?>"></script> --> <script src="<?php echo base_url('public/assets/js/jquery.maphilight.js');?>"></script> <form id="land_owner" class="form-inline address_list"> <section class="content-header"> <h1> Address List </h1> </section> <!--- section 1 ----> <section class="content"> <div class="row"> <div class="form-group col-sm-12 col-md-4" style="display: flex;"> <label class="col-sm-4 ">Project</label> <select class="form-control col-sm-8 pt_project" name="p_poject" id="selected_project"> <option value="All">All</option> <?php foreach($projects as $val) { ?> <option value="<?php echo $val->project_id;?>"><?php echo $val->project_name;?></option> <?php } ?> </select> </div> <div class="form-group col-sm-12 col-md-4"> <label class="col-sm-4"></label> <button type="submit" id="address_submit" style="margin-top:0px !important" class="btn btn-primary center-block submit">Submit</button> </div> </div> <div class="col-sm-1"></div> <div class="col-sm-10"> <div id="jaytab3" style="margin-top:6%;" > <div class="grid_div"></div> <table id="list4"></table> <div id="pager4"></div> <div id="dialogSelectRow3" title="Warning" style="display:none"> <p>Please select row</p> </div> </div> </div> <div class="col-sm-5"></div> <div id="source-html" class="export_table" style="font-size: 15px; display:none;"></div> <div style="display:none;"> <table border="1" style="border-spacing: 0px !important;" id="print_table" class="print_table"></table> </div> <div class="col-sm-0 col-md-1"></div> </section> <!--- section 2 --> </form> <style type="text/css"> /*.content-wrapper, .right-side { min-height:900px !important; }*/ a { color: inherit; } </style> <script src="<?php echo base_url('public/assets/admin_dashboard/js/jquery.table2excel.js');?>"></script> <script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/jquery.jqGrid.min.js'); ?>"></script> <!-- This is the localization file of the grid controlling messages, labels, etc. <!-- We support more than 40 localizations --> <script type="text/ecmascript" src="<?php echo base_url('public/jqgrid/js/i18n/grid.locale-en.js'); ?>"></script> <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom --> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/assets/css/jquery-ui.css'); ?>" /> <!-- The link to the CSS that the grid needs --> <link rel="stylesheet" type="text/css" media="screen" href="<?php echo base_url('public/jqgrid/css/ui.jqgrid.css'); ?>" /> <script src="<?php echo base_url('public/assets/js/jquery-ui.js'); ?>" type="text/javascript"></script> <script type="text/javascript"> $('.address_list').submit(function(e){ e.preventDefault(); $("#address_submit").attr('disabled', 'disabled'); $("#address_submit").text("submitting..."); $("#address_submit").text("Submit"); $("#address_submit").removeAttr('disabled'); var p_poject=$('select[name=p_poject]').val(); load_date_grid(); function load_date_grid() { $("#list4").setGridParam( { url:"<?php echo site_url('get-address-list')?>?p_poject="+p_poject, page:1 }).trigger("reloadGrid");//Reload grid trigger $("#list4").setGridParam({datatype:'json', page:1}).trigger('reloadGrid'); return false } jQuery("#list4").jqGrid({ url:"<?php echo site_url('get-address-list')?>?p_poject="+p_poject, type : "GET", datatype: "json", colNames:['SI','Project Name','Site','Client Name','Address','Contact'], colModel:[ {name:'booking_id',index:'booking_id', width:100, hidden:true,editable:false,key:true}, {name:'project_name',index:'project_name', width:275, editable:false}, {name:'site_number',index:'site_number', width:75,editable:false}, {name:'customer_name',index:'customer_name', width:150, editable:false}, {name:'address',index:'address', width:300, editable:false}, {name:'mobile1',index:'mobile1', width:200, editable:false}, /*{name:'',index:'', width:100, hidden:false,editable:false,formatter: function (cellvalue, options, rowObject) { var retVal = ""; var retVal = '<button><a href="javascript:void(0);" onclick="fun_print('+rowObject.booking_id+');">Print </a></button>'; return retVal; }}, */ ], height: 'auto', rowNum:20, rowTotal: 2000, rowList : [10,20,30,50,100,500,1000], rownumbers: true, rownumWidth: 40, pager:"#pager4", sortname:'owner_id', viewrecords: true, gridview: true, //autowidth: true, sortorder:"asc", shrinkToFit: false, emptyrecords: 'No records to display', // multiselect: true, // multiboxonly: true, loadonce:true, caption:"Address List", }); $("#list4").jqGrid("setLabel", "rn", "SL"); $("#list4").jqGrid('filterToolbar',{searchOperators : false}); //for multisearch $("#list4").jqGrid('navGrid','#pager4', {edit:true,add:false,del:false,search:true,refreshstate:"current"}, { }, { }, { }, { sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'], closeOnEscape: true, multipleSearch: true, closeAfterSearch: true } ).navButtonAdd('#pager4', { caption:"Print", buttonicon:"ui-icon-print", onClickButton:print_page, position: "last", title:"", cursor: "pointer", id:"client_delete_new" } ); $("#list4").navButtonAdd('#pager4', { caption:"Export", buttonicon:"", onClickButton: export_page, position: "last", title:"", cursor: "pointer", id:"client_delete" } ); function export_page() { var id = jQuery("#list4").jqGrid('getDataIDs'); var p_poject=$('select[name=p_poject]').val(); $.ajax({ type : 'post', url : "<?php echo site_url("adress-list-print")?>?p_poject="+p_poject, data : {id:id}, success:function(data) { response=jQuery.parseJSON(data); console.log(response); var count =1; var content = ''; $.each(response,function(key,val){ //content +='<tr><td>'+count+'</td> <td>'+val.customer_name+' '+val.relation+' '+val.father_or_husband+' <br> '+val.address+' <br> '+val.mobile1+' <br> '+val.office_number+'</td>' content +=val.customer_name+'<br>'; content +=val.relation+' '+val.father_or_husband+'<br>'; content +=val.address+'<br>'; content +=val.mobile1+'<br>'; content +=val.office_number+'<br>'; content +='---------------------------------------------------------------------------------------------------------------------------------'+'<br>'; }); $('.export_table').append(content); var header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' "+ "xmlns:w='urn:schemas-microsoft-com:office:word' "+ "xmlns='http://www.w3.org/TR/REC-html40'>"+ "<head><meta charset='utf-8'><title>Export HTML to Word Document with JavaScript</title></head><body>"; var footer = "</body></html>"; var sourceHTML = header+document.getElementById("source-html").innerHTML+footer; var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML); var fileDownload = document.createElement("a"); document.body.appendChild(fileDownload); fileDownload.href = source; fileDownload.download = 'Address List.doc'; fileDownload.click(); document.body.removeChild(fileDownload); /*if (!window.Blob) { alert('Your legacy browser does not support this action.'); return; } var html, link, blob, url, css; // EU A4 use: size: 841.95pt 595.35pt; // US Letter use: size:11.0in 8.5in; css = ( '<style>' + '@page WordSection1{size: 841.95pt 595.35pt;mso-page-orientation: landscape;}' + 'div.WordSection1 {page: WordSection1;}' + 'table{border-collapse:collapse;}td{border:1px gray solid;width:5em;padding:2px;}'+ '</style>' ); html = content; blob = new Blob(['\ufeff', html], { type: 'application/msword' }); url = URL.createObjectURL(blob); link = document.createElement('A'); link.href = url; // Set default file name. // Word will append file extension - do not add an extension here. link.download = 'Document'; document.body.appendChild(link); if (navigator.msSaveOrOpenBlob ) navigator.msSaveOrOpenBlob( blob, 'Document.doc'); // IE10-11 else link.click(); // other browsers document.body.removeChild(link);*/ } }); } function export_data() { /*$("#export_table").table2excel({ exclude: ".noExl", name: "Excel Document Name", filename: "Address List", fileext: ".xls", exclude_img: true, exclude_links: true, exclude_inputs: true }); */ } function print_page() { var id = jQuery("#list4").jqGrid('getDataIDs'); var p_poject=$('select[name=p_poject]').val(); $.ajax({ type : 'post', url : "<?php echo site_url("adress-list-print")?>?p_poject="+p_poject, data : {id:id}, success:function(data) { response=jQuery.parseJSON(data); console.log(response); var count =1; var content = ''; content +='<thead><tr><th>Sl No</th> </tr></thead>'; $.each(response,function(key,val) { content +='<tr><td>'+count+'</td> <td>'+val.customer_name+' '+val.relation+' '+val.father_or_husband+' <br> '+val.address+' <br> '+val.mobile1+' <br> '+val.office_number+'</td> </tr>'; count++; }); $('.print_table').append(content); print_page1(); } }); } function print_page1() { var divToPrint=document.getElementById('print_table'); newWin= window.open(""); newWin.document.write('<html><head><title></title>'); newWin.document.write('</head>'); newWin.document.write(divToPrint.outerHTML); newWin.document.write('</html>'); newWin.print(); document.getElementById('print_table').style.display=''; newWin.close(); //location.reload(); } }); </script> <style type="text/css"> .ui-jqgrid-titlebar { height: 35px; } .ui-jqgrid .ui-jqgrid-caption { text-align: left; background: #af0100; color: white; } .ui-jqgrid-bdiv{ height: 420px !important; } a{ color: inherit; } </style> <?php echo view('includes/footer');?>