добавить текстовое поле в конкретный столбец в JQuery Datatable

Question

У меня есть работающий поиск данных, моя проблема в том, что я хочу добавить текстовое поле в определенный столбец моей таблицы.Например, я хочу добавить текстовое поле в заголовке таблицы Basic (A) ниже перед данными, а также еще одно текстовое поле в заголовке S Contri.как я должен это сделатьКроме того, я хочу добавить текстовое поле в нижней части таблицы данных на общую сумму.

    <div class="card">
            <table id="IncomeLedgerTable" class="table table-striped table-bordered cell-border compact stripe" style="width:100%; margin-top: 20px;">
                <thead>
                    <tr>
                        <td>EmployeeID</td>
                        <td>PayPeriod</td>
                        <td>Basic(A)</td>
                        <td>OtherInCome</td>
                        <td>Detail</td>
                        <td>Contribution Base</td>
                        <td>Tax Base (D)</td>
                        <td>S Contri (E)</td>
                        <td>P Contri (F)</td>
                        <td>Pb Contri (G)</td>
                        <td>Net Tax Base (H)</td>
                        <td>Tax WithShield (I)</td>
                    </tr>
                </thead>
      </table>        
</div>   
<script>
var table = $('#IncomeLedgerTable').DataTable({
        "order": []
        });

$('.btnSearch').click(function () {

        $.ajax({
            type: 'POST',
            dataType: "json",
            url: '@Url.Action("IncomeLedgerTable", "LastPay")',
            data: {

                'EmployeeID': $('#EmployeeID').val(),
                'Year': $('#Year').val()

            },
            beforeSend: function () {
                $.dialog({
                    title: 'Please wait.',
                    content: 'Dont close this while loading.',
                });
            },
           success: function (result) {
                $(".jconfirm").fadeOut(1);
               var resultData = JSON.parse(result.data);
               console.log(resultData);
               if (resultData.length > 0) {

                    table.clear().draw();

                    for (i = 0; i < resultData.length; i++) {
                        table.row.add([
                        '<td>' + resultData[i]. UserID + '</td>',
                        '<td>' + resultData[i]. PayrollPeriod + '</td>',
                        '<td>' + resultData[i]. BasicPay + '</td>',
                        '<td>' + resultData[i]. OtherIncome+ '</td>',
                        '<td>' + resultData[i]. Detail + '</td>',
                        '<td>' + resultData[i]. GovBasis + '</td>',
                        '<td>' + resultData[i]. TaxBase + '</td>',
                        '<td>' + resultData[i]. S + '</td>',
                        '<td>' + resultData[i]. P + '</td>',
                        '<td>' + resultData[i]. HD + '</td>',
                        '<td>' + resultData[i]. NetTaxBase + '</td>',
                        '<td>' + resultData[i]. TaxWithHeld + '</td>',
                        ]).draw(false);
                    }


                }




                else {
                    alert('No Data Found ')
               }    
            },

        });

    });

</script>