jqgrid footer issue

thanks for reply sir but i want solution for jqgrid.my code

  $(document).ready(function () {
        var lPath = window.location.pathname;
        var arr = lPath.split("/");
        var id = arr[arr.length - 1];

        $("#list").jqGrid({
            url: '/BankPay/GetRecords/',
            datatype: "Json",
            contentType: "application/json; charset-utf-8",
            mtype: 'GET',
            colNames: ['Sr No.', 'Code', 'Plan/BU','Account Description', 'Sub Ledger', 'Debit(INR)', 'Credit(INR)', 'Cost Center', 'Profit Center', 'Chq Type', 'Chque', 'Narr'],
            colModel: [
                { name: 'Sno', index: 'Sno', align: "center", sortable: false, editable: true, editoptions: { size: 5, readonly: 'readonly' } },//,hidden:true
                { name: 'txtCode_Master1', index: 'txtCode_Master1', align: "center", sortable: false, editable: true, edittype: 'text' },
                { name: 'txtCode_TFatBranch', index: 'txtCode_TFatBranch', align: "right", sortable: false, editable: true, edittype: 'text', },
                { name: 'txtName_Master1', index: 'txtName_Master1', align: "right", sortable: false, editable: true, edittype: 'text' },
                { name: 'txtCode_SubLedger', index: 'txtCode_SubLedger', align: "right", sortable: false, editable: true, edittype: 'text' },
                { name: 'Debit', index: 'Debit', align: "right", sortable: false, editable: true, edittype: 'text', formatter: 'integer' },
                { name: 'Credit', index: 'Credit', align: "right", sortable: false, editable: true, edittype: 'text' },
                { name: 'txtCode_CostCentre1', index: 'txtCode_CostCentre1', align: "center", sortable: false, editable: true, edittype: 'text' },
                { name: 'txtCode_ProfitCentre1', index: 'txtCode_ProfitCentre1', align: "center", sortable: false, editable: true, edittype: 'text' },
                { name: 'chequetype', index: 'chequetype', align: "center", sortable: false, editable: true, edittype: 'text'},
                { name: 'Transfer', index: 'Transfer', align: "center", sortable: false, editable: true, edittype: 'text'},
                { name: 'Narr', index: 'Narr', align: "center", sortable: false, editable: true, edittype: 'textarea', editoptions: { size: 300 } },

            @*{ name: 'LinkButton',  formatter: function (cellvalue, options, rowObject) {   var x =  '@Html.ActionLink("Edit", "Edit", "BankPay", new { Id = "Sno" }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "dialog1", HttpMethod = "GET" }
            )';
                return x.replace("Sno", rowObject[0]);
            }, sortable: false, align: 'left', width: 100*@
            //}
            ],
            pager: "#pager",
            rowNum: 5,
            rownumbers: true,
            rowList: [5, 10, 15],
            height: 'auto',
            //height:'110',
            width: '940',
            overflow: 'auto',
            viewrecords: true,      
            multiselect: true,
            gridview: true,
            sortname: 'Sno',
            editurl: '/BankPay/EditRecords/',                    
            footerrow: true,

            loadComplete: function () {
                var $grid = $("#list");
                var sum = $grid.jqGrid('getCol', 'Debit', false, 'sum');
                $grid.jqGrid('footerData', 'set', { txtCode_SubLedger: 'Total (Dbt/Crt):', Debit: sum });
                var sum1 = $grid.jqGrid('getCol', 'Credit', false, 'sum');
                $grid.jqGrid('footerData', 'set', { Total: 'Total:', Credit: sum1 });

            },

            userDataOnFooter: true,
            clearGridData: true,
            loadonce: true,
            reloadAfterSubmit: true,
            reloadAfterEdit: true,
            caption: "Bank Payment",
        });
      
        jQuery("#list").jqGrid('navGrid', '#pager', {
            edit: false,
            edittext: "Edit",
            add: false,
            addtext: "Add",
            del: true,
            deltext: "Delete",
            search: true,
            searchtext: "Search",
            refresh: true,
            refreshtext: "Refresh",
            alertcap: "Warning",
            alertext: "Please Select Row",
        }, {}, { width: 434 }, { top: 0 }, { height: 'auto' }


        );
          $.extend($.jgrid.edit, {
            beforeSubmit: function () {
                $(this).jqGrid("setGridParam", { datatype: "json" });
                return [true, "", ""];
            }
        });
       
      
    });

Go through this link..

http://mleibman.github.io/SlickGrid/examples/example-totals-via-data-provider.html