jQuery UI Widgets Forums DataTable About summary!

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 1 week, 5 days ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • About summary! #113639

    my_2000
    Participant

    I don’t know how to write this summary, thank you

    <script type="text/javascript">
        $(document).ready(function () {
          $('#clickme').jqxButton({width: 100, height: 26, theme:'base'});
          $("#clickme").on('click', function () {
             $("#product_table").jqxDataTable('addRow', null, {a1:"name",a2:1,a3:0}, 'first');
          });
          $("#product_table").jqxDataTable({
           	theme:"base",
           	width: "600",
              editable: true,
              columnsResize: true,
              showAggregates: true,
              aggregatesHeight: 30,
              columns: [
                { text: 'name', dataField: 'a1', width: 200, align: 'center',editable: false,cellsalign: 'right'},
                { text: 'num1', dataField: 'a2', width: 200, editable: false,align: 'center',cellsalign: 'right',
      			      aggregates: ['sum'],
                  aggregatesRenderer: function (aggregates, column, element) {    
                      var renderString = "<div style='margin: 4px; float: right;  height: 100%;'>";
                      renderString += "<strong>Total: </strong>" + aggregates['sum'] + "</div>";
                      return renderString;
                  }
                },
                { text: 'num2', dataField: 'a3', width: 200, align: 'center',cellsalign: 'right',
      			      aggregates: [{
      	              'num2_all': function (aggregatedValue, currentValue) {
      	                 return aggregatedValue + currentValue;
      	              },
                  aggregatesrenderer: function (aggregates, column, element, summaryData) {
                      var renderstring = "<div  style=''>";
                      $.each(aggregates, function (key, value) {
                          renderstring += '<div style="">All: ' + value + '</div>';
                      });
                      renderstring += "</div>";
                      return renderstring;
                  }
      	        }]
              }]
          });
        })
      </script>
    <div id="product_table"></div><br>
    <div id="clickme">Add row</div>
    About summary! #113647

    Hristo
    Participant

    Hello my_2000,

    Could you provide us with more details?
    What do you want to achieve?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    About summary! #113649

    my_2000
    Participant

    Sorry, in fact, I just want to sum, but I want to change “sum” into Chinese. My English is not very good, so I cut a screen, you can see that the total is displayed undefined, and num2 input numbers will report an error, I do not know how to write, in addition, please do not post demo in http://jsfiddle.net/ , China can’t visit this site!
    error pic

    thanks

    About summary! #113651

    Hristo
    Participant

    Hello my_2000,

    Thank you for the feedback.
    I will create a work item for this case.
    Meanwhile, you could try this approach below:

    <script type="text/javascript">
        $(document).ready(function() {
            $("#clickme").jqxButton({
                width: 100,
                height: 26,
                theme: "base"
            });
    
            var source = {
                localdata: [
                    // {
                    //     a1: "Test",
                    //     a2: 1,
                    //     a3: 1
                    // }
                ],
                datatype: "array",
                datafields: [{
                    name: "a1",
                    type: "string"
                }, {
                    name: 'a2',
                    type: 'number'
                }, {
                    name: 'a3',
                    type: 'number'
                }]
            };
    
            var dataAdapter = new $.jqx.dataAdapter(source);
    
            var isInitialState = true;
            $("#product_table").jqxDataTable({
                // theme: "base",
                width: "600",
                editable: true,
                columnsResize: true,
                showAggregates: true,
                aggregatesHeight: 30,
                source: dataAdapter,
                columns: [{
                    text: "name",
                    dataField: "a1",
                    width: 200,
                    align: "center",
                    editable: false,
                    cellsalign: "right"
                }, {
                    text: "num1",
                    dataField: "a2",
                    width: 200,
                    editable: false,
                    align: "center",
                    cellsalign: "right",
                    aggregates: ["sum"],
                    aggregatesRenderer: function(aggregates, column, element) {
                        if (isInitialState && dataAdapter.records.length == 0) {
                            setTimeout(function() {
                                isInitialState = false;
                            }, 800);
                            return "<strong>( Total )</strong>";
                        } else {
                            var renderString = "<div style='margin: 4px; float: right;  height: 100%;'>";
                            renderString += "<strong>Total: </strong>" + aggregates["sum"] + "</div>";
                            return renderString;
                        }
                    }
                }, {
                    text: "num2",
                    dataField: "a3",
                    width: 200,
                    align: "center",
                    cellsalign: "right",
                    aggregates: [{
                        "num2_all": function(aggregatedValue, currentValue) {
                            return aggregatedValue + currentValue;
                        },
                        aggregatesRenderer: function(aggregates, column, element, summaryData, c) {
                            var renderstring = "<div  style=''>";
                            // $.each(aggregates, function(key, value) {
                            //     console.log("<div style="">All: " + value + "</div>");
                            //     renderstring += "<div style="">All: " + value + "</div>";
                            // });
    
                            renderstring += "</div>";
                            return renderstring;
                        }
                    }]
                }]
            });
    
            var dataArray = [];
    
            $("#clickme").on("click", function() {
                dataArray.push({
                    a1: "name",
                    a2: 1,
                    a3: Math.floor(Math.random() * 10)
                });
    
                source.localdata = dataArray;
    
                $("#product_table").jqxDataTable("render");
            });
        });
    </script>
    
    <div id="product_table"></div><br>
    <div id="clickme">Add row</div>

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.