loading when null is returned

[cpuinParticipant]

I have this problem since i began my project.
All tables which accept as JSON “null” (where there is no document from this day for instance) stack on displaying “loading”.
I want where there is no data, do be displayed empty table w/out raws.

[NadezhdaParticipant]

Hello cpuin,

Have you checked the property ‘autoShowLoadElement’? I think it may help you achieve your requirement.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[cpuinParticipant]

Dear Nadezhda,

Thank you, but this remove the “loading gif” at all.I need it when big amount of data is loading, but don’t need it “stacked” when null is returned.

[NadezhdaParticipant]

Hi cpuin,

Could you, please, provide us with a sample, including your datatable initialization code, or, preferably, a JSFiddle , so that we may get a better understanding of your scenario and be able to help?

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[cpuinParticipant]

I tried to register in JSFiddle, but there is a pain.

Here is the part of the code you need.Thank you in advance:

function createTable(url) {
			
			var source =
						{
							datatype: "json",
							datafields: [
								{ name: 'ID', type: 'int'},
								{ name: 'Acct', type: 'int'},
								{ name: 'InvoiceNumber', type: 'string'},
								{ name: 'partnerName' , type: 'string'},
								{ name: 'ObjectID' , type: 'string'},
								{ name: 'InvoiceDate' , type: 'string'}
							],
							url: url,
							cache: false,
							addRow: function (rowID, rowData, position, commit) {
							           var data = "insert=true&" + $.param(rowData);
							           $.ajax({
							               dataType: 'json',
							               url: 'json_documents.php',
							               cache: false,
							               data: data,
							               success: function (data, status, xhr) {
							                   // update command is executed.
							                   commit(true);
							               },
							               error: function (jqXHR, textStatus, errorThrown) {
							                   commit(false);
							                   alert(errorThrown);
							                   }
							                  });
							                },
							updateRow: function (rowID, rowData, commit) {
									   var data = "" + $.param(rowData);
									   $.ajax({
										   dataType: 'json',
										   url: '',
										   cache: false,
										   data: data,
										   success: function (data, status, xhr) {
											   // update command is executed.
											   commit(true);
										   },
										   error: function (jqXHR, textStatus, errorThrown) {
											   commit(false);
											   alert('Does not work :(');
											   }
											  });
											},
							deleteRow: function (rowID, commit) {
												// synchronize with the server - send delete command
												// call commit with parameter true if the synchronization with the server is successful 
												// and with parameter false if the synchronization failed.
												commit(true);
											}
											
						};

var dataAdapter = new $.jqx.dataAdapter(source);
				 
				 this.editrow = -1;
				 
				 $("#dataTable").jqxDataTable(
				 				 {
				 					 width: 750,
				 					 pageable: true,
				 					 pagerButtonsCount: 10,
				 					 source: dataAdapter,
				 					 filterable: true,
				 					 filterMode: 'simple',
				 					 sortable: true,
				 					 selectionMode: 'none',
				 					 enableHover:false,
				 					 columnsResize: false,
				 					 altRows: true,
				 					 showAggregates: false,
				 					 aggregatesHeight: 60,
				 					 //autoShowLoadElement: false,
				 					 rendered: function () {
				 					 			//PRINT DOWNLOAD -------------------------------------                   
				 					                $(".printButtons").jqxButton({ width: 60, template: "inverse" });
													$(".printButtons").on('click', function (event) {
														if (event.target.tagName =="BUTTON") {
														        var row = $(event.target).attr('data-row');
														        var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
														        

														//CREATE WINDOW
														$('#eventWindow').jqxWindow({
														                maxHeight: 180,
														                maxWidth: 280,
														                minHeight: 30, 
														                minWidth: 250, 
														                height: 180, 
														                width: 270,
														                resizable: false, 
														                isModal: true, 
														                modalOpacity: 0.3,
														                okButton: $('#print'), cancelButton: $('#cancel'),
														                initContent: function () {
														                    $("#bg").jqxRadioButton({ width: 120, height: 25, groupName: "Print", checked: true});
														                    $("#en").jqxRadioButton({ width: 120, height: 25,groupName: "Print", checked: false});
														                    $('#print').jqxButton({ width: '80px' });
														                    $('#cancel').jqxButton({ width: '80px' });
														                    $('#print').focus();
														                    
														                }
														               
														            });
														//OPEN THE WINDOW
														$("#eventWindow").jqxWindow('open');
														$("#eventWindow").css('visibility', 'inherit');
														$("#print").off("mousedown");
														$("#print").on("mousedown",function() {
																
														$("#eventWindow").jqxWindow('close');
														//print PDF
														//var saleNumber = $("#invAcct").val();
														
														var saleNumber = cellValueAcct;
														if ($("#bg").val()==true) {
															//BG
															var url = "invoicebg.php?saleNumber=" + saleNumber + "&do=print";				        			var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700");
															myWindow.focus();
															myWindow.print();
														}
														else {
															//EN
														
														    var url = "invoiceen.php?saleNumber=" + saleNumber + "&do=print";				        		    var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700");
														    myWindow.focus();
														    myWindow.print();
														}				        				
																		
															});
													}
											    });
											    
											    
											    //PDF DOWNLOAD ---------------------------------------
											    $(".pdfButtons").jqxButton({ width: 60, template: "success" });
											    $(".pdfButtons").on('click', function (event) {
											    	if (event.target.tagName =="BUTTON") {
											    	        var row = $(event.target).attr('data-row');
											    	        var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
											    	        }
											    	
											    
											    //CREATE WINDOW
											    $('#pdfWindow').jqxWindow({
											                    maxHeight: 180,
											                    maxWidth: 280,
											                    minHeight: 30, 
											                    minWidth: 250, 
											                    height: 180, 
											                    width: 270,
											                    resizable: false, 
											                    isModal: true, 
											                    modalOpacity: 0.3,
											                    okButton: $('#download_pdf'), cancelButton: $('#cancel_pdf'),
											                    initContent: function () {
											                        $("#bg_pdf").jqxRadioButton({ width: 120, height: 25, groupName: "PDF", checked: true});
											                        $("#en_pdf").jqxRadioButton({ width: 120, height: 25, groupName: "PDF", checked: false});
											                        $('#download_pdf').jqxButton({ width: '80px' });
											                        $('#cancel_pdf').jqxButton({ width: '80px' });
											                        $('#download_pdf').focus();
											                        
											                    }
											                   
											                });
											       //OPEN THE WINDOW
											       $("#pdfWindow").jqxWindow('open');
											       $("#pdfWindow").css('visibility', 'inherit');
											       $("#download_pdf").off("mousedown");
											       $("#download_pdf").on("mousedown",function() {
											       		
											       $("#pdfWindow").jqxWindow('close');
											       var saleNumber = cellValueAcct;
											       if ($("#bg_pdf").val()==true) {
											       	//BG
											       	var url = "invoicebg.php?saleNumber=" + saleNumber+ "&do=download";	
											       	var myWindow=window.open(url);
											       				        			
											       }
											       
											       else {
											       	//EN
											       	var url = "invoiceen.php?saleNumber=" + saleNumber+ "&do=download";	
											       		var myWindow=window.open(url);
											       
											           
											       }				        				
											       				
											       	
											       });
											     
											    });
											    											    
											    //DELETE BUTTONS -------------------------------------
											    
											    $(".deleteButtons").jqxButton({ width: 60, template: "danger" });
											    $(".deleteButtons").on('click', function (event) {
											    	if (event.target.tagName =="BUTTON") {
											    	
											    	//CREATE WINDOW
											    	$('#deleteDialog').jqxWindow({
											    	                maxHeight: 150,
											    	                maxWidth: 280,
											    	                minHeight: 30, 
											    	                minWidth: 250, 
											    	                height: 180, 
											    	                width: 270,
											    	                resizable: false, 
											    	                isModal: true, 
											    	                modalOpacity: 0.3,
											    	                okButton: $('#deleteDocument'), cancelButton: $('#cancelDocument'),
											    	                initContent: function () {
											    	                
											    	                    $('#deleteDocumentButton').jqxButton({ width: '80px' });
											    	                    $('#cancelDocumentButton').jqxButton({ width: '80px' });
											    	                    $('#deleteDocumentButton').focus();
											    	                    
											    	                }
											    	               
											    	            });
												  $("#deleteDialog").jqxWindow('open');
												  $("#deleteDialog").css('visibility', 'inherit');
												  $("#deleteDocumentButton").off("mousedown");
											      $("#deleteDocumentButton").on("mousedown",function() {
											      		var row = $(event.target).attr('data-row');
														deleteDocument(row);
													});
												  $("#cancelDocumentButton").on("mousedown",function() {
												  	    $("#deleteDialog").jqxWindow('close');
												  	});
											    	        
											    	        }
											    	
											    });
											    
											 	
				 					   },
				 					 columns: [
				 					 	 { text: 'Дата:', dataField: 'InvoiceDate' , width: 150},
				 					 	 //{ text: 'Acct:', dataField: 'Acct' , width: 100},
				 						 { text: 'Ф-ра номер:', dataField: 'InvoiceNumber', width: 100 },
				 						 { text: 'Обект:', dataField: 'ObjectID', cellsFormat: 'f', width: 150 },
				 						 { text: 'Партньор:', dataField: 'partnerName', width:150},
				 						 { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                           // render custom column.
				 						                           return "<button data-row='" + row + "' class='printButtons'>Печат</button>";
				 												
				 													
				 						                       }
				 						 },
				 						 { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                            // render custom column.
				 						                            return "<button data-row='" + row + "' class='pdfButtons'>PDF</button>";
				 						 						
				 						 							
				 						                        }
				 						  },
				 						  
				 						  { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                              // render custom column.
				 						                              return "<button data-row='" + row + "' class='deleteButtons'>Анулирай</button>";
				 						   						
				 						   							
				 						                          }
				 						    }
				 						 
				 						 						  
				 						 ]
				 						 
				 				 });

[NadezhdaParticipant]

Hi cpuin,

Here is an example which shows how to take out the lines from table: http://jsfiddle.net/03k3s0x7/. I hope it will work in your case.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

jqx-grid-table

[cpuinParticipant]

Dear Nadhezda,

I have no idea, but my table is not loading when there is no record in the returned JSON.
In my projects i have tables which displays No data (what i want) when empty JSON is returned and tables which showing “loading…”
when empty JSOn is returned.I compared them, but becaus eof the large code i can’t find when i make a mistake.I don’t know so good the details of the your framework, but this stands on my way…

Here is the full code.

// CREATE DATE WIDGET --------------------------------------------------------------------------------					
$("#startDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"});
		   		
		   		
$("#endDate").jqxDateTimeInput({width: '100px', height: '25px', formatString: "yyyy-MM-dd"});
		   		
// INIT --------------------------------------------------------------------------------------

var start = $('#startDate').val();
var end = $('#endDate').val();
var url = 'json_documents.php?' + "startDate=" + start + "&endDate=" + end;
createTable(url);
				
// CREATE TABLE ------------------------------------------------------------------------------------						

			function createTable(url) {
			
			var source =
						{
							datatype: "json",
							datafields: [
								{ name: 'ID', type: 'int'},
								{ name: 'Acct', type: 'int'},
								{ name: 'InvoiceNumber', type: 'string'},
								{ name: 'partnerName' , type: 'string'},
								{ name: 'ObjectID' , type: 'string'},
								{ name: 'InvoiceDate' , type: 'string'}
							],
							url: url,
							cache: false,
							addRow: function (rowID, rowData, position, commit) {
							           var data = "insert=true&" + $.param(rowData);
							           $.ajax({
							               dataType: 'json',
							               url: 'json_documents.php',
							               cache: false,
							               data: data,
							               success: function (data, status, xhr) {
							                   // update command is executed.
							                   commit(true);
							               },
							               error: function (jqXHR, textStatus, errorThrown) {
							                   commit(false);
							                   alert(errorThrown);
							                   }
							                  });
							                },
							updateRow: function (rowID, rowData, commit) {
									   var data = "" + $.param(rowData);
									   $.ajax({
										   dataType: 'json',
										   url: '',
										   cache: false,
										   data: data,
										   success: function (data, status, xhr) {
											   // update command is executed.
											   commit(true);
										   },
										   error: function (jqXHR, textStatus, errorThrown) {
											   commit(false);
											   alert('Does not work :(');
											   }
											  });
											},
							deleteRow: function (rowID, commit) {
												// synchronize with the server - send delete command
												// call commit with parameter true if the synchronization with the server is successful 
												// and with parameter false if the synchronization failed.
												commit(true);
											}
											
						};
						
						
// DELETE DOCUMNET -----------------------------------------------------------------------------------

				 
				 
				 
				 
				 
				 var dataAdapter = new $.jqx.dataAdapter(source);
				 
				 //this.editrow = -1;
				 
				 $("#dataTable").jqxDataTable(
				 				 {
				 					 width: 750,
				 					 pageable: true,
				 					 pagerButtonsCount: 10,
				 					 source: dataAdapter,
				 					 filterable: true,
				 					 filterMode: 'simple',
				 					 sortable: true,
				 					 selectionMode: 'none',
				 					 enableHover:false,
				 					 columnsResize: false,
				 					 altRows: true,
				 					 showAggregates: false,
				 					 aggregatesHeight: 60,
				 					 //autoShowLoadElement: false,
				 					 rendered: function () {
				 					 			//PRINT DOWNLOAD -------------------------------------                   
				 					                $(".printButtons").jqxButton({ width: 60, template: "inverse" });
													$(".printButtons").on('click', function (event) {
														if (event.target.tagName =="BUTTON") {
														        var row = $(event.target).attr('data-row');
														        var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
														        

														//CREATE WINDOW
														$('#eventWindow').jqxWindow({
														                maxHeight: 180,
														                maxWidth: 280,
														                minHeight: 30, 
														                minWidth: 250, 
														                height: 180, 
														                width: 270,
														                resizable: false, 
														                isModal: true, 
														                modalOpacity: 0.3,
														                okButton: $('#print'), cancelButton: $('#cancel'),
														                initContent: function () {
														                    $("#bg").jqxRadioButton({ width: 120, height: 25, groupName: "Print", checked: true});
														                    $("#en").jqxRadioButton({ width: 120, height: 25,groupName: "Print", checked: false});
														                    $('#print').jqxButton({ width: '80px' });
														                    $('#cancel').jqxButton({ width: '80px' });
														                    $('#print').focus();
														                    
														                }
														               
														            });
														//OPEN THE WINDOW
														$("#eventWindow").jqxWindow('open');
														$("#eventWindow").css('visibility', 'inherit');
														$("#print").off("mousedown");
														$("#print").on("mousedown",function() {
																
														$("#eventWindow").jqxWindow('close');
														//print PDF
														//var saleNumber = $("#invAcct").val();
														
														var saleNumber = cellValueAcct;
														if ($("#bg").val()==true) {
															//BG
															var url = "invoicebg.php?saleNumber=" + saleNumber + "&do=print";				        			var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700");
															myWindow.focus();
															myWindow.print();
														}
														else {
															//EN
														
														    var url = "invoiceen.php?saleNumber=" + saleNumber + "&do=print";				        		    var myWindow=window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=10, left=350, width=600, height=700");
														    myWindow.focus();
														    myWindow.print();
														}				        				
																		
															});
													}
											    });
											    
											    
											    //PDF DOWNLOAD ---------------------------------------
											    $(".pdfButtons").jqxButton({ width: 60, template: "success" });
											    $(".pdfButtons").on('click', function (event) {
											    	if (event.target.tagName =="BUTTON") {
											    	        var row = $(event.target).attr('data-row');
											    	        var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
											    	        }
											    	
											    
											    //CREATE WINDOW
											    $('#pdfWindow').jqxWindow({
											                    maxHeight: 180,
											                    maxWidth: 280,
											                    minHeight: 30, 
											                    minWidth: 250, 
											                    height: 180, 
											                    width: 270,
											                    resizable: false, 
											                    isModal: true, 
											                    modalOpacity: 0.3,
											                    okButton: $('#download_pdf'), cancelButton: $('#cancel_pdf'),
											                    initContent: function () {
											                        $("#bg_pdf").jqxRadioButton({ width: 120, height: 25, groupName: "PDF", checked: true});
											                        $("#en_pdf").jqxRadioButton({ width: 120, height: 25, groupName: "PDF", checked: false});
											                        $('#download_pdf').jqxButton({ width: '80px' });
											                        $('#cancel_pdf').jqxButton({ width: '80px' });
											                        $('#download_pdf').focus();
											                        
											                    }
											                   
											                });
											       //OPEN THE WINDOW
											       $("#pdfWindow").jqxWindow('open');
											       $("#pdfWindow").css('visibility', 'inherit');
											       $("#download_pdf").off("mousedown");
											       $("#download_pdf").on("mousedown",function() {
											       		
											       $("#pdfWindow").jqxWindow('close');
											       var saleNumber = cellValueAcct;
											       if ($("#bg_pdf").val()==true) {
											       	//BG
											       	var url = "invoicebg.php?saleNumber=" + saleNumber+ "&do=download";	
											       	var myWindow=window.open(url);
											       				        			
											       }
											       
											       else {
											       	//EN
											       	var url = "invoiceen.php?saleNumber=" + saleNumber+ "&do=download";	
											       		var myWindow=window.open(url);
											       
											           
											       }				        				
											       				
											       	
											       });
											     
											    });
											    											    
											    //DELETE BUTTONS -------------------------------------
											    
											    $(".deleteButtons").jqxButton({ width: 60, template: "danger" });
											    $(".deleteButtons").on('click', function (event) {
											    	if (event.target.tagName =="BUTTON") {
											    	
											    	//CREATE WINDOW
											    	$('#deleteDialog').jqxWindow({
											    	                maxHeight: 150,
											    	                maxWidth: 280,
											    	                minHeight: 30, 
											    	                minWidth: 250, 
											    	                height: 180, 
											    	                width: 270,
											    	                resizable: false, 
											    	                isModal: true, 
											    	                modalOpacity: 0.3,
											    	                okButton: $('#deleteDocument'), cancelButton: $('#cancelDocument'),
											    	                initContent: function () {
											    	                
											    	                    $('#deleteDocumentButton').jqxButton({ width: '80px' });
											    	                    $('#cancelDocumentButton').jqxButton({ width: '80px' });
											    	                    $('#deleteDocumentButton').focus();
											    	                    
											    	                }
											    	               
											    	            });
												  $("#deleteDialog").jqxWindow('open');
												  $("#deleteDialog").css('visibility', 'inherit');
												  $("#deleteDocumentButton").off("mousedown");
											      $("#deleteDocumentButton").on("mousedown",function() {
											      		var row = $(event.target).attr('data-row');
														deleteDocument(row);
													});
												  $("#cancelDocumentButton").on("mousedown",function() {
												  	    $("#deleteDialog").jqxWindow('close');
												  	});
											    	        
											    	        }
											    	
											    });
											    
											 	
				 					   },
				 					 columns: [
				 					 	 { text: 'Дата:', dataField: 'InvoiceDate' , width: 150},
				 					 	 //{ text: 'Acct:', dataField: 'Acct' , width: 100},
				 						 { text: 'Ф-ра номер:', dataField: 'InvoiceNumber', width: 100 },
				 						 { text: 'Обект:', dataField: 'ObjectID', cellsFormat: 'f', width: 150 },
				 						 { text: 'Партньор:', dataField: 'partnerName', width:150},
				 						 { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                           // render custom column.
				 						                           return "<button data-row='" + row + "' class='printButtons'>Печат</button>";
				 												
				 													
				 						                       }
				 						 },
				 						 { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                            // render custom column.
				 						                            return "<button data-row='" + row + "' class='pdfButtons'>PDF</button>";
				 						 						
				 						 							
				 						                        }
				 						  },
				 						  
				 						  { text: '', cellsAlign: 'center', columnType: 'none', width:65, editable: false, sortable: false, dataField: null, cellsRenderer: function (row, column, value) {
				 						                              // render custom column.
				 						                              return "<button data-row='" + row + "' class='deleteButtons'>Анулирай</button>";
				 						   						
				 						   							
				 						                          }
				 						    }
				 						 
				 						 						  
				 						 ]
				 						 
				 				 });
				 				            
			
			}
						

// DELETE ROW

				function deleteDocument(row) {
				
				
				//var row = $(event.target).attr('data-row');
				var cellValueAcct = $("#dataTable").jqxDataTable('getCellValue', row, 'Acct');
				var data = {
				"delete": "true",
				"Acct": cellValueAcct,
				};
				
				$.ajax({
						dataType: 'text',
						url: 'json_documents.php',
						cache: false,
						data: data,
						type: 'POST',
						success: function (status, xhr) {
						
						  $("#deleteDialog").jqxWindow('close');
						  $("#dataTable").jqxDataTable('updateBoundData');
						},
						error: function (jqXHR, textStatus, errorThrown) {
										        
										  
					    }
					});
					
					
				};
		   		
		   		
// CREATE SUBIMT BUTTON ------------------------------------------------------------------------------

		   		$("#submitButton").jqxButton({width: '100px', height: '25px'});
		   		$("#submitButton").mousedown(function() {
		   					var start = $('#startDate').val();
		   					var end = $('#endDate').val();
		   					
		   					//check which arguments are selected
		   					
		   					url = 'json_documents.php?' + "startDate=" + start + "&endDate=" + end;
		   					createTable(url);
		   					
		   					
		   		});
		   		
				
// CREATE EXPORT and PRINT BUTTONS of the TABLE ------------------------------------------------------
		   
		   		
		   		$("#excelExport").jqxButton();
		   					$("#xmlExport").jqxButton();
		   					$("#csvExport").jqxButton();
		   					$("#tsvExport").jqxButton();
		   					$("#htmlExport").jqxButton();
		   					$("#jsonExport").jqxButton();
		   					$("#excelExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'xls');
		   					});
		   					$("#xmlExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'xml');
		   					});
		   					$("#csvExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'csv');
		   					});
		   					$("#tsvExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'tsv');
		   					});
		   					$("#htmlExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'html');
		   					});
		   					$("#jsonExport").click(function () {
		   						$("#dataTable").jqxDataTable('exportData', 'json');
		   					});
		   					
		   		 $("#printButton").jqxButton({ width: 100 });
		   				  
		   					$("#printButton").click(function () {
		   						 var gridContent = $("#dataTable").jqxDataTable('exportData', 'html');
		   						 var newWindow = window.open('', '', 'width=800, height=500'),
		   						 document = newWindow.document.open(),
		   						 pageContent =
		   							 '<!DOCTYPE html>' +
		   							 '<html>' +
		   							 '<head>' +
		   							 '<meta charset="utf-8" />' +
		   							 '<title>jQWidgets DataTable</title>' +
		   							 '</head>' +
		   							 '<body>' + gridContent + '</body></html>';
		   						 document.write(pageContent);
		   						 document.close();
		   						 newWindow.print();
		   					 });
		   					 
			});
//END -----------------------------------------------------------------------------------------      

	</script>
	
	
	<div style='margin-top: 20px;'>
		<div style='float: left;' id="startDate" type="date" name="startdate"></div>
		<div style='float: left;' id="endDate" type="date" name="endDate" /></div>
	<input type="button" value="Изпрати" id='submitButton' />
	</div>
	<br>
	<div id="dataTable"></div>
	<div style='margin-top: 20px;'>
		<div style='float: left;'>
			<input type="button" value="Export to Excel" id='excelExport' />
			<br />
			<br />
			<input type="button" value="Export to XML" id='xmlExport' />
		</div>
		<div style='margin-left: 10px; float: left;'>
			<input type="button" value="Export to CSV" id='csvExport' />
			<br />
			<br />
			<input type="button" value="Export to TSV" id='tsvExport' />
		</div>
		<div style='margin-left: 10px; float: left;'>
			<input type="button" value="Export to HTML" id='htmlExport' />
			<br />
			<br />
			<input type="button" value="Export to JSON" id='jsonExport' />
		</div>
	</div>
	<div style='margin-top: 20px;'>
		<div style='margin-left: 10px; float: left;'>
			<input type="button" value="Print" id='printButton' />
		</div>
	</div>
	
		      
	      
	      
	      <div id="eventWindow" style="visibility: hidden;">
	      <div id="windowHeader">
	                          <span>
	                              <img src="css/myicons/icon_ok.png" height="20" alt="" style="margin-right: 15px" />
	                          </span>
	        </div>
	      	<div>
	        	<table width="100%">
	        		<tr>
	        			<td valign="center" align="center" height="30" colspan="2"><font color="green">Изберете език на документа:</font></td>
	        		</tr>
	            	<tr>
	            		<td width="80" valign="center" align="center" height="70" colspan="2">
	            		<div id="bg">BG(BGN)</div>
	            		<div id="en">EN(EUR)</div>
	            		</td>
	                </tr>
	                <tr>
	                	<td width="80"></td>
	                	<td width="80" colspan="2">
	                		<button id="cancel">Отказ</button>
	                		<button id="print">Принтирай</button>
	                	</td>
	                </tr>
	            </table>	                          
	      	</div>
	      </div>
	      
	      
	      
	      
	      <div id="pdfWindow" style="visibility: hidden;">
	      <div id="windowHeader2">
	                          <span>
	                              <img src="css/myicons/icon_ok.png" height="20" alt="" style="margin-right: 15px" />
	                          </span>
	        </div>
	      	<div>
	        	<table width="100%">
	        		<tr>
	        			<td valign="center" align="center" height="30" colspan="2"><font color="green">Изберете език за PDF документа:</font></td>
	        		</tr>
	            	<tr>
	            		<td width="80" valign="center" align="center" height="70" colspan="2">
	            		<div id="bg_pdf">BG(BGN)</div>
	            		<div id="en_pdf">EN(EUR)</div>
	            		</td>
	                </tr>
	                <tr>
	                	<td width="80"></td>
	                	<td width="80" colspan="2">
	                		<button id="cancel_pdf">Отказ</button>
	                		<button id="download_pdf">Свали</button>
	                	</td>
	                </tr>
	            </table>	                          
	      	</div>
	      </div>
	      
	      
	      
	      
	      <div id="deleteDialog" style="visibility: hidden;">
	      <div id="windowHeader3">
	                          <span>
	                              <img src="css/myicons/icon_attention.png" height="20" alt="" style="margin-right: 15px" />
	                          </span>
	        </div>
	      	<div>
	        	<table width="100%" height="100%">
	        		<tr height="50">
	        			<td valign="center" align="center" colspan="2"><font color="">Сигурни ли сте , че искате да изтриете документа? <br>Той няма да може да бъде възтановен!</font></td>
	        		</tr>
	                <tr>
	                	<td width="80"></td>
	                	<td width="80" colspan="2">
	                		
	                		<button id="cancelDocumentButton">Отказ</button>
	                		<button id="deleteDocumentButton">Изтрий</button>
	                	</td>
	                </tr>
	            </table>	                          
	      	</div>
	      </div>

[NadezhdaParticipant]

Hi cpuin,

Are there any errors thrown in your browser’s console when running the page with jqxDataTable? Please, find the following example where the source is null and jqxDataTable works as expected: http://jsfiddle.net/Dimitar_jQWidgets/48gbt9wj/.
You can make JSFiddle examples with or without user registration.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts