Question posted in
You can find the official documentation here.

ASP.NET MVC DataTable sum column – Jquery ajax

I am needing to sum the "Total" column. I would like to add the result to the footer of the table.

<script>
    $(document).ready(function () {
        $("#orderTable").DataTable(
            {
                "ajax": {
                    "url": "/Orders/GetList",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "CustomerName" },
                    { "data": "OrderDate" },
                    { "data": "Total" },
                ]
            });
    });
</script>

Any guidance is appreciated.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    For anyone else searching for a solution:

    <script>
    $(document).ready(function () {
        $("#orderTable").DataTable(
            {
                "ajax": {
                    "url": "/Orders/GetList",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "CustomerName" },
                    { "data": "OrderDate" },
                    { "data": "Total" },
                ],

                 footerCallback: function (row, data, start, end, display) {
                    var api = this.api(), data;
                    // Remove the formatting to get integer data for summation
                    var intVal = function (i) {
                        return typeof i === 'string' ? i.replace(/[$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                    };

                    // Total over this page
                    data = api.column(2, {
                        page: 'current'
                    }).data(); pageTotal = data.length ? data.reduce(function (a, b) { return intVal(a) + intVal(b); }) : 0;

                    // Update footer
                     $(api.column(2).footer()).html('$' + pageTotal);
                }
            });
    });
</script>

    ref: Jquery DataTable column Sum (Good structural reference in second answer)

    ref: https://www.ihbc.org.uk/consultationsdb_new/examples/advanced_init/footer_callback.html


  2. 0

    There is option called drawCallback, use that like below.

     drawCallback: function () {
        var yourSum = $('#orderTable').DataTable().column(number).data().sum(); // column number just like 1 , 2, 3, 4  ............... which you try to add 
        $('#total').html(sum); // #total is your html element id
      }

    And HTML for total:

     <div id="total"></div>

    Via CSS place your div where ever you want.

    Login or Signup to reply.
  3. 0

    I think so best thing to do is getting sum directly from the server something like ("/Orders/GetTotal")
    You can handle GetTotal And GetList together to prevent double request to database

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search