I am stuck in that I want to reset or restart the column number from 1 after executing search in Laravel using ajax in datatable.
The code i have written so far
<table class="table table-bordered table-striped table-condensed flip-content" id="server-side-datatables">
<thead>
<tr>
<th class="dt-body-left">Serial No.</th>
<th>Document Type</th>
<th>Document Nr.</th>
<th>Date</th>
<th>Amount</th>
<th>CURENCY</th>
<th>Merchnat</th>
<th>Commnets</th>
<th width="10%">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$("#search-frm").submit(function(){
oTableCustom.draw();
return false;
});
// $("#search-frm").submit(function(e) {
// table.fnPageChange(0);
// table.fnReloadAjax();
// return false;
// });
$.fn.dataTableExt.sErrMode = 'throw';
var cur_month = '{{date("M")}}';
var title = 'WEBPAL WEB SERVICES BORDEROU CONTABILITATE LUNA:'+ cur_month;
var filename = 'WEBPAL WEB SERVICES BORDEROU CONTABILITATE LUNA:'+ cur_month;
var oTableCustom = $('#server-side-datatables').DataTable({
processing: true,
dom: 'Bfrtip',
serverSide: true,
searching: false,
ajax: {
"url": "{!! route($moduleRouteText.'.data') !!}",
"data": function ( data )
{
data.search_start_date = $("#search-frm input[name='search_start_date']").val();
data.search_end_date = $("#search-frm input[name='search_end_date']").val();
data.doc_number = $("#search-frm input[name='doc_number']").val();
data.search_parteners = $("#search-frm input[name='search_parteners']").val();
}
},
"order": [[ 0, "asc" ]],
// "fnRowCallback" : function(nRow, aData, iDisplayIndex){
// $("td:first", nRow).html(iDisplayIndex +1);
// return nRow;
// },
columns: [
{ data: 'rownum', name: 'rownum' },
{ data: 'doc_type', name: 'doc_type' },
{ data: 'doc_number', name: 'doc_number' },
{ data: 'doc_date', name: 'doc_date'},
{ data: 'amount', name: 'amount' },
{ data: 'currency', name: 'currency' },
{ data: 'partener', name: '{{ TBL_PARTENER }}.id'},
{ data: 'comments', name: 'comments' },
{ data: 'action', orderable: false, searchable: false}
],
lengthMenu: [
[ 10, 25, 50, -1 ],
[ '10 rows', '25 rows', '50 rows', 'Show all' ]
],
columnDefs: [
{ "type": "num-fmt", "targets": 4, "className": "text-left", appliesTo: 'pdf' }
],
buttons: [
{
extend: 'pageLength'
},
{
extend: 'pdfHtml5',
orientation: 'landscape',
title: title,
filename:filename,
exportOptions: {
columns: [ 0, 1, 2,3,4,5,6,7 ],
},
customize : function(doc){
doc.content[1].table.widths =
Array(doc.content[1].table.body[0].length + 1).join('*').split('');
doc.styles.tableHeader.alignment = 'left';
},
},
]
});
});
</script>
#endsection
I want output like this
just use CSS code
tbody {
counter-reset: row;
/* Set the row counter to 0 */
}
tbody tr::before {
counter-increment: row;
/* Increment the row counter*/
content: counter(row) ": ";
/* Display the row */
}
I am using DataTable to display the data. All the column names with check box is displaying when i click show and hide button. When i uncheck all the column and when i try to check the column name at that time the first column is getting copied or getting displayed in the all the row values.
Following is my code which i written.
$('#datatable_col_reorder').dataTable({
"processing": true,
"sAjaxSource": "<?php echo $config['ajaxUrlPath'];>json.php",
"bFilter" : true,
"fnServerData": function ( sAjaxSource , aoData, fnCallback ) {
aoData.push( { "name": "eventName", "value": $('#eventName').val() });
aoData.push( { "name": "et", "value": $('#Type').val() });
aoData.push( { "name": "vn", "value": $('#address').val() });
aoData.push( { "name": "da", "value": $('#date_added').val() });
aoData.push( { "name": "ti", "value": $('#time_added').val() });
aoData.push( { "name": "st", "value": $('#status').val() });
aoData.push( { "name": "br", "value": $('#status1').val() });
aoData.push( { "name": "cr", "value": $('#status2').val() });
aoData.push( { "name": "pr", "value": $('#spercentage').val() });
// etc
$( "#status2,#address,#spercentage" ).keyup(function() {
var table = $('#datatable_col_reorder').DataTable();
table.ajax.reload();
});
$( "#status,#Type,#date_added,#time_added,#status1,#status2" ).change(function() {
var table = $('#datatable_col_reorder').DataTable();
table.ajax.reload();
});
$.getJSON( sAjaxSource, aoData, function (json) { console.log(json); fnCallback(json) } );
},
"sDom":"<'col-sm-1 col-xs-1 col-md-1 col-lg-1 showHidebutton'C><'dt-toolbar'r>"+
"t"+
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'p>>",
"autoWidth" : true,
"rowCallback": function( nRow, aData, iDisplayIndex ) {
// responsiveHelper_datatable_tabletools.createExpandIcon(nRow);
$('td:eq(0)', nRow).html(''+aData[0]+'');
return nRow;
},
"preDrawCallback" : function() {
// Initialize the responsive datatables helper once.
if (!responsiveHelper_datatable_col_reorder) {
responsiveHelper_datatable_col_reorder = new ResponsiveDatatablesHelper($('#datatable_col_reorder'), breakpointDefinition);
}
},
"drawCallback" : function(oSettings) {
responsiveHelper_datatable_col_reorder.respond();
}
});
When i uncheck all and when i try to recheck each checkboxes, at that time the first column values are getting displayed in all other column like type,status,address etc.
Example: Consider Name: XYZ, After deselecting checkboxes if i try to recheck at that time the each column values is showing "XYZ" in status,address columns.
Thanks in advance.
I'm using multiple datepicker on same grid and I face the problem to get a proper result.
I used 3 datepicker in 1 grid.
Only the first datepicker (Order Date)is able to output proper result while the other 2 datepicker (Start Date & End Date) are not able to generate proper result.
There is no problem with the query, so could you find out what's going on here?
Thanks in advance!
php wrapper
<?php
ob_start();
require_once 'config.php';
// include the jqGrid Class
require_once "php/jqGrid.php";
// include the PDO driver class
require_once "php/jqGridPdo.php";
// include the datepicker
require_once "php/jqCalendar.php";
// Connection to the server
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
// Tell the db that we use utf-8
$conn->query("SET NAMES utf8");
// Create the jqGrid instance
$grid = new jqGridRender($conn);
// Write the SQL Query
$grid->SelectCommand = "SELECT c.CompanyID, c.CompanyCode, c.CompanyName, c.Area, o.OrderCode, o.Date, m.maID ,m.System, m.Status, m.StartDate, m.EndDate, m.Type FROM company c, orders o, maintenance_agreement m WHERE c.CompanyID = o.CompanyID AND o.OrderID = m.OrderID ";
// Set the table to where you update the data
$grid->table = 'maintenance_agreement';
// set the ouput format to json
$grid->dataType = 'json';
// Let the grid create the model
$grid->setPrimaryKeyId('maID');
// Let the grid create the model
$grid->setColModel();
// Set the url from where we obtain the data
$grid->setUrl('grouping_ma_details.php');
// Set grid caption using the option caption
$grid->setGridOptions(array(
"sortable"=>true,
"rownumbers"=>true,
"caption"=>"Group by Maintenance Agreement",
"rowNum"=>20,
"height"=>'auto',
"width"=>1300,
"sortname"=>"maID",
"hoverrows"=>true,
"rowList"=>array(10,20,50),
"footerrow"=>false,
"userDataOnFooter"=>false,
"grouping"=>true,
"groupingView"=>array(
"groupField" => array('CompanyName'),
"groupColumnShow" => array(true), //show or hide area column
"groupText" =>array('<b> Company Name: {0}</b>',),
"groupDataSorted" => true,
"groupSummary" => array(true)
)
));
//Start Date
$grid->setColProperty("StartDate", array("label"=>"Start Date","width"=>120,"align"=>"center","fixed"=>true,
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"d M Y")
));
$grid->setUserTime("d M Y");
$grid->setUserDate("d M Y");
$grid->setDatepicker("StartDate",array("buttonOnly"=>false));
$grid->datearray = array('StartDate');
//End Date
$grid->setColProperty("EndDate", array("label"=>"End Date","width"=>120,"align"=>"center","fixed"=>true,
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"d M Y")
));
$grid->setUserTime("d M Y");
$grid->setUserDate("d M Y");
$grid->setDatepicker("EndDate",array("buttonOnly"=>false));
$grid->datearray = array('EndDate');
//Order Date
$grid->setColProperty("Date", array("label"=>"Order Date","width"=>100,"editable"=>false,"align"=>"center","fixed"=>true,
"formatter"=>"date",
"formatoptions"=>array("srcformat"=>"Y-m-d H:i:s","newformat"=>"d M Y")
));
$grid->setUserTime("d M Y");
$grid->setUserDate("d M Y");
$grid->setDatepicker("Date",array("buttonOnly"=>false));
$grid->datearray = array('Date');
// Enable toolbar searching
$grid->toolbarfilter = true;
$grid->setFilterOptions(array("stringResult"=>true,"searchOnEnter"=>false,"defaultSearch"=>"cn"));
// Enable navigator
$grid->navigator = true;
$grid->setNavOptions('navigator', array("pdf"=>true, "excel"=>true,"add"=>false,"edit"=>true,"del"=>false,"view"=>true, "search"=>true));
$grid->renderGrid('#grid','#pager',true, null, null, true,true);
$conn = null;
?>
javascript code
jQuery(document).ready(function ($) {
jQuery('#grid').jqGrid({
"width": 1300,
"hoverrows": true,
"viewrecords": true,
"jsonReader": {
"repeatitems": false,
"subgrid": {
"repeatitems": false
}
},
"xmlReader": {
"repeatitems": false,
"subgrid": {
"repeatitems": false
}
},
"gridview": true,
"url": "grouping_ma_details.php",
"editurl": "grouping_ma_details.php",
"cellurl": "grouping_ma_details.php",
"sortable": true,
"rownumbers": true,
"caption": "Group by Maintenance Agreement",
"rowNum": 20,
"height": "auto",
"sortname": "maID",
"rowList": [10, 20, 50],
"footerrow": false,
"userDataOnFooter": false,
"grouping": true,
"groupingView": {
"groupField": ["CompanyName"],
"groupColumnShow": [true],
"groupText": ["<b> Company Name: {0}</b>"],
"groupDataSorted": true,
"groupSummary": [true]
},
"datatype": "json",
"colModel": [{
"name": "CompanyID",
"index": "CompanyID",
"sorttype": "int",
"editable": true
}, {
"name": "CompanyCode",
"index": "CompanyCode",
"sorttype": "string",
"editable": true
}, {
"name": "CompanyName",
"index": "CompanyName",
"sorttype": "string",
"editable": true
}, {
"name": "Area",
"index": "Area",
"sorttype": "string",
"editable": true
}, {
"name": "OrderCode",
"index": "OrderCode",
"sorttype": "string",
"editable": true
}, {
"name": "Date",
"index": "Date",
"sorttype": "date",
"label": "Order Date",
"width": 100,
"editable": false,
"align": "center",
"fixed": true,
"formatter": "date",
"formatoptions": {
"srcformat": "Y-m-d H:i:s",
"newformat": "d M Y"
},
"editoptions": {
"dataInit": function (el) {
setTimeout(function () {
if (jQuery.ui) {
if (jQuery.ui.datepicker) {
jQuery(el).datepicker({
"disabled": false,
"dateFormat": "dd M yy"
});
jQuery('.ui-datepicker').css({
'font-size': '75%'
});
}
}
}, 100);
}
},
"searchoptions": {
"dataInit": function (el) {
setTimeout(function () {
if (jQuery.ui) {
if (jQuery.ui.datepicker) {
jQuery(el).datepicker({
"disabled": false,
"dateFormat": "dd M yy"
});
jQuery('.ui-datepicker').css({
'font-size': '75%'
});
}
}
}, 100);
}
}
}, {
"name": "maID",
"index": "maID",
"sorttype": "int",
"key": true,
"editable": true
}, {
"name": "System",
"index": "System",
"sorttype": "string",
"editable": true
}, {
"name": "Status",
"index": "Status",
"sorttype": "string",
"editable": true
}, {
"name": "StartDate",
"index": "StartDate",
"sorttype": "date",
"label": "Start Date",
"width": 120,
"align": "center",
"fixed": true,
"formatter": "date",
"formatoptions": {
"srcformat": "Y-m-d H:i:s",
"newformat": "d M Y"
},
"editoptions": {
"dataInit": function (el) {
setTimeout(function () {
if (jQuery.ui) {
if (jQuery.ui.datepicker) {
jQuery(el).datepicker({
"disabled": false,
"dateFormat": "dd M yy"
});
jQuery('.ui-datepicker').css({
'font-size': '75%'
});
}
}
}, 100);
}
},
"searchoptions": {
"dataInit": function (el) {
setTimeout(function () {
if (jQuery.ui) {
if (jQuery.ui.datepicker) {
jQuery(el).datepicker({
"disabled": false,
"dateFormat": "dd M yy"
});
jQuery('.ui-datepicker').css({
'font-size': '75%'
});
}
}
}, 100);
}
},
"editable": true
}, {
"name": "EndDate",
"index": "EndDate",
"sorttype": "date",
"label": "End Date",
"width": 120,
"align": "center",
"fixed": true,
"formatter": "date",
"formatoptions": {
"srcformat": "Y-m-d H:i:s",
"newformat": "d M Y"
},
"editoptions": {
"dataInit": function (el) {
setTimeout(function () {
if (jQuery.ui) {
if (jQuery.ui.datepicker) {
jQuery(el).datepicker({
"disabled": false,
"dateFormat": "dd M yy"
});
jQuery('.ui-datepicker').css({
'font-size': '75%'
});
}
}
}, 100);
}
},
"searchoptions": {
"dataInit": function (el) {
setTimeout(function () {
if (jQuery.ui) {
if (jQuery.ui.datepicker) {
jQuery(el).datepicker({
"disabled": false,
"dateFormat": "dd M yy"
});
jQuery('.ui-datepicker').css({
'font-size': '75%'
});
}
}
}, 100);
}
},
"editable": true
}, {
"name": "Type",
"index": "Type",
"sorttype": "string",
"editable": true
}],
"postData": {
"oper": "grid"
},
"prmNames": {
"page": "page",
"rows": "rows",
"sort": "sidx",
"order": "sord",
"search": "_search",
"nd": "nd",
"id": "maID",
"filter": "filters",
"searchField": "searchField",
"searchOper": "searchOper",
"searchString": "searchString",
"oper": "oper",
"query": "grid",
"addoper": "add",
"editoper": "edit",
"deloper": "del",
"excel": "excel",
"subgrid": "subgrid",
"totalrows": "totalrows",
"autocomplete": "autocmpl"
},
"loadError": function (xhr, status, err) {
try {
jQuery.jgrid.info_dialog(jQuery.jgrid.errors.errcap, '<div class="ui-state-error">' + xhr.responseText + '</div>', jQuery.jgrid.edit.bClose, {
buttonalign: 'right'
});
} catch (e) {
alert(xhr.responseText);
}
},
"pager": "#pager"
});
jQuery('#grid').jqGrid('navGrid', '#pager', {
"edit": true,
"add": false,
"del": false,
"search": true,
"refresh": true,
"view": true,
"excel": true,
"pdf": true,
"csv": false,
"columns": false
}, {
"drag": true,
"resize": true,
"closeOnEscape": true,
"dataheight": 150,
"errorTextFormat": function (r) {
return r.responseText;
}
}, {
"drag": true,
"resize": true,
"closeOnEscape": true,
"dataheight": 150,
"errorTextFormat": function (r) {
return r.responseText;
}
}, {
"errorTextFormat": function (r) {
return r.responseText;
}
}, {
"drag": true,
"closeAfterSearch": true,
"multipleSearch": true
}, {
"drag": true,
"resize": true,
"closeOnEscape": true,
"dataheight": 150
});
jQuery('#grid').jqGrid('navButtonAdd', '#pager', {
id: 'pager_excel',
caption: '',
title: 'Export To Excel',
onClickButton: function (e) {
try {
jQuery("#grid").jqGrid('excelExport', {
tag: 'excel',
url: 'grouping_ma_details.php'
});
} catch (e) {
window.location = 'grouping_ma_details.php?oper=excel';
}
},
buttonicon: 'ui-icon-newwin'
});
jQuery('#grid').jqGrid('navButtonAdd', '#pager', {
id: 'pager_pdf',
caption: '',
title: 'Export To Pdf',
onClickButton: function (e) {
try {
jQuery("#grid").jqGrid('excelExport', {
tag: 'pdf',
url: 'grouping_ma_details.php'
});
} catch (e) {
window.location = 'grouping_ma_details.php?oper=pdf';
}
},
buttonicon: 'ui-icon-print'
});
jQuery('#grid').jqGrid('filterToolbar', {
"stringResult": true,
"searchOnEnter": false,
"defaultSearch": "cn"
});
});
If one uses searching toolbar (filterToolbar) it can be specified only one operation used during searching. You used
$('#grid').jqGrid('filterToolbar',
{ stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
So the operation "Contains" ("cn") will be apply on all columns during filtering where sopt of searchoptions is not specified. It's extremely important to include sopt of searchoptions for all columns having stype: "select".
If you don't use Searching Dialog then you can include sopt: ["eq"] in searchoptions for all columns having stype: "select" and formatter: "date". If you use Searching Dialog additionally to Searching Toolbar you should in sopt with some array where "eq" is the first element of the array. In the case the operation "Equal" will be used during filtering of the grid.
Because you use Advanced Searching Dialog (with multipleSearch: true) you can verify the filter generated by the Searching Toolbar very easy. You need just set any filter (or filters) and then open Searching Dialog after that. If you don't opened the searching dialog before you will see the filter generated by searching filter. I recommend you to use recreateForm: true option together with multipleSearch: true (or probably with multipleGroup: true). In the case you will always see the current used filter in the searching dialog instead of the last searching dialog (it will be hide instead of destroying).
I want to add row details option with filtering and exporting to an Excel document. After adding export to program row details function are not working.
Here is my code:
<script type="text/javascript" language="javascript" class="init">
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table_data_json = '[<?php for($i=0;$i<5;$i++){?>{"name":"Tiger Nixon","position":"System Architect","salary":"$320,800","start_date":"2011/04/25","office":"Edinburgh","extn":"5421"},<?php }?>{"name":"Garrett Winters","position":"Accountant","salary":"$170,750","start_date":"2011/07/25","office":"Tokyo","extn":"8422"},{"name":"Ashton Cox","position":"Junior Technical Author","salary":"$86,000","start_date":"2009/01/12","office":"San Francisco","extn":"1562"}]';
var table = $('#example').DataTable( {
"data": JSON.parse(table_data_json),
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']],
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"aButtons": [
{
"sExtends": "xls",
"sButtonText": "Export to Spreadsheet",
"mColumns": "visible",
"oSelectorOpts": { filter: 'applied', order: 'current' },
"bFooter":false
}
],
"oSelectorOpts": {
"filter": "applied"
}
},
initComplete: function () {
var r = $('#example tfoot tr');
r.find('th').each(function(){
$(this).css('padding', 8);
});
$('#example thead').append(r);
$('#search_0').css('text-align', 'center');
this.api().columns([1,7]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
</script>