jQuery UI Widgets Forums DataTable sortable

This topic contains 5 replies, has 2 voices, and was last updated by  Peter Stoev 10 years ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    sortable Posts
  • sortable #55004

    cpuin
    Participant

    I don’t know how, but sortable function stopped working.I didn’t change anything related to this functionality.Now it filters only by first column instead of all, it’s in ‘simple’ mode.

    <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
               var source =
               		{
               			datatype: "json",
               			datafields: [
               				{ name: 'ID'},
               				{ name: 'Code'},
               				{ name: 'Name'},
               				{ name: 'PriceIn'},
               				{ name: 'PriceOut1'},
               				{ name: 'PriceOut2'},
               				{ name: 'PriceOut3'},
               				{ name: 'PriceOut4'},
               				{ name: 'PriceOut5'}
               			],
               			url: 'products_json.php',
               			cache: false,
               			addRow: function (rowID, rowData, position, commit) {
               			                    // synchronize with the server - send insert command
               			                    // call commit with parameter true if the synchronization with the server is successful 
               			                    // and with parameter false if the synchronization failed.
               			                    // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
               			                    commit(true);
               			                },
               			updateRow: function (rowID, rowData, commit) {
               			           var data = "update=true&" + $.param(rowData);
               			           $.ajax({
               			               dataType: 'json',
               			               url: 'products_json.php',
               			               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);
                
                $("#dataTable").jqxDataTable(
                {
                    width: 850,
                    pageable: true,
                    pagerButtonsCount: 10,
                    source: dataAdapter,
                    filterable: true,
                    filtermode: 'simple',
                    columnsResize: false,
                    columns: [
                    	{ text: 'Код', dataField: 'ID', width: 100 },
                        { text: 'SKU', dataField: 'Code', width: 200 },
                        { text: 'Описание', dataField: 'Name', width: 350 },
                        { text: 'Доставна цена', dataField: 'PriceIn', cellsFormat: 'f', width: 100 },
                        { text: 'Цена дребно', dataField: 'PriceOut2' , width: 100}
                    ]
                });
                
                $("#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: 80 });
                          
                            $("#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();
                             });
                             
                             
                $("#dialog").jqxWindow({
                                        resizable: false,
                                        isModal: true,
                                        position: { left: $("#dataTable").offset().left + 300, top: $("#dataTable").offset().top + 35 },
                                        width: 400, height: 300,
                                        autoOpen: false
                                    });
                $("#dialog").css('visibility', 'visible');
                
                $("#cancelButton").jqxButton();
                $("#cancelButton").mousedown(function () {
                                        // close jqxWindow.
                                        $("#dialog").jqxWindow('close');
                                    });
                $("#saveButton").jqxButton();
                $("#saveButton").mousedown(function () {
                                // close jqxWindow.
                                $("#dialog").jqxWindow('close');
                                // update edited row.
                                var editRow = parseInt($("#dialog").attr('data-row'));
                                var rowData = {
                                ID: editRow+1,
                                Code: $("#itemCode").val(), 
                                Name: $("#itemName").val(),
                                PriceIn: $("#itemPriceIn").val(), 
                                PriceOut1: $("#itemPriceOut1").val(),
                                PriceOut2: $("#itemPriceOut2").val(),
                                PriceOut3: $("#itemPriceOut3").val(),
                                PriceOut4: $("#itemPriceOut4").val(),
                                PriceOut5: $("#itemPriceOut5").val()
                                               };
                                $("#dataTable").jqxDataTable('updateRow', editRow, rowData);
                                    });
                $("#dialog").on('close', function () {
                                        // enable jqxDataTable.
                                        $("#dataTable").jqxDataTable({ disabled: false });
                                    });
                
                $("#dataTable").on('rowDoubleClick', function (event) {
                                var args = event.args;
                                var index = args.index;
                                var row = args.row;
                                // update the widgets inside jqxWindow.
                                $("#dialog").jqxWindow('setTitle', "Edit Row: " + row.ID);
                                $("#dialog").jqxWindow('open');
                                $("#dialog").attr('data-row', index);
                                $("#dataTable").jqxDataTable({ disabled: true });
                                $("#itemCode").jqxInput({width: 300, height: 20});
                                $("#itemCode").val(row.Code);
                                $("#itemName").jqxInput({width: 300, height: 20});
                                $("#itemName").val(row.Name);
                                $("#itemPriceIn").jqxInput({width: 100, height: 20});
                                $("#itemPriceIn").val(row.PriceIn);
                                $("#itemPriceOut1").jqxInput({width: 100, height: 20});
                                $("#itemPriceOut1").val(row.PriceOut1);
                                $("#itemPriceOut2").jqxInput({width: 100, height: 20});
                                $("#itemPriceOut2").val(row.PriceOut2);
                                $("#itemPriceOut3").jqxInput({width: 100, height: 20});
                                $("#itemPriceOut3").val(row.PriceOut3);
                                $("#itemPriceOut4").jqxInput({width: 100, height: 20});
                                $("#itemPriceOut4").val(row.PriceOut4);
                                $("#itemPriceOut5").jqxInput({width: 100, height: 20});
                                $("#itemPriceOut5").val(row.PriceOut5);
                                
                            });
                
                  
                  
            });
    
    
    sortable #55015

    Peter Stoev
    Keymaster

    Hi cpuin,

    The Sorting is not enabled in the provided code. In order to enable it, set the “sortable” property of jqxDataTable to true.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    sortable #55028

    cpuin
    Participant

    It was my mistake, i mean i need filtering not sorting.

    sortable #55029

    Peter Stoev
    Keymaster

    Hi cpuin,

    We do not find an issue with the filtering on our side. However, I just noticed in your code that you missed to set the “type” member of your source object’s data fields. That is mandatory and should not be ommited.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    sortable #55037

    cpuin
    Participant

    Now it works.Thank you a lot!

    sortable #55038

    Peter Stoev
    Keymaster

    Hi cpuin,

    Thanks for the update and greetings from Sofia 🙂

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.