jQuery UI Widgets Forums DataTable loading when null is returned

This topic contains 7 replies, has 2 voices, and was last updated by  Nadezhda 8 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • loading when null is returned #70153

    cpuin
    Participant

    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.

    loading when null is returned #70155

    Nadezhda
    Participant

    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/

    loading when null is returned #70167

    cpuin
    Participant

    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.

    loading when null is returned #70170

    Nadezhda
    Participant

    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/

    loading when null is returned #70181

    cpuin
    Participant

    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>";
    				 						   						
    				 						   							
    				 						                          }
    				 						    }
    				 						 
    				 						 						  
    				 						 ]
    				 						 
    				 				 });
    
    loading when null is returned #70195

    Nadezhda
    Participant

    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

    loading when null is returned #70598

    cpuin
    Participant

    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>
    
    loading when null is returned #70644

    Nadezhda
    Participant

    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/

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.