How to set an INPUT value when it is in the footer

How to set an INPUT value when it is in the footer

jstuardojstuardo Posts: 91Questions: 37Answers: 0

Hello, this is breaking my head for more than 2 hours.

I have a datatable with a summary footer. In the footer I have placed an INPUT called TxtEmail, this way:

                        <th class="text-right font-weight-bold align-middle" colspan="3">
                            <div class="row">
                                <div class="col-md-6 text-right">
                                    <button type="button" id="BtnEnviar" class="btn btn-outline-info btn-rounded"><i class="fa fa-mail"></i> Enviar por Mail</button>
                                <div class="col-md-6">
                                    <input type="text" id="TxtEmail" class="form-control" maxlength="100" />
                        <th class="text-right align-middle">
                            <div class="row">
                                <div class="col-6 font-weight-bold">Total:</div>
                                <div class="col-6" id="summaryGrossAmount"><div class="apply-tax" rel="summary"></div></div>

And the footer callback is as follows:

    footerCallback: function (row, data, start, end, display) {
                var api = this.api();

                api.columns('.summary', {
                    page: 'current'
                }).every(function () {
                    var sum = this
                        .reduce(function (a, b) {
                            var x = parseFloat(a) || 0;
                            var y = parseFloat(b) || 0;
                            return x + y;
                        }, 0);

                    let footer = $(this.footer());

                                id: $('#sClienteId').val(),
                                __RequestVerificationToken: token
                            function (data) {


All code that sums the column values and add them to the column works perfect. But please look at the $.post instruction. It calls an URL and when returns, it should update the TxtEmail field value. In this case, I have hardcoded the value.

The fact is that the field is not updated.

The field is updated only if I place the code that updates outside of everything, what is obvious because is like I initialize the INPUT with some value. The problem is that I cannot update that INPUT when I refresh the datatable.

Any help, please?



  • jstuardojstuardo Posts: 91Questions: 37Answers: 0

    Finally I have used $(tfoot).find('input').eq(0).val(data); to set the value and it worked. I don't know why it did not work getting the control directly.

Sign In or Register to comment.