如何使用javascript设置数据表超出第一页的行数据？答案

【问题标题】：How to set rows data of data table beyond first page using java script?如何使用javascript设置数据表超出第一页的行数据？
【发布时间】：2019-02-11 08:40:54
【问题描述】：

下面是我的 ajax 函数，用于从第一页更改行的值并反映另一页数据表的总数。

            $.ajax({
                    type : "Post",
                    contentType : "application/json; charset=UTF-8",
                    url : 'editPYActual.do',
                    cache : false,
                    data : JSON.stringify(array),
                    success : function(result) {

                    //document.getElementById("finTotal").innerText = 
                      result.employee.finTotal;


              $('#tList1').dataTable().fnUpdate(result.employee.finTotal , 
              $('tr#lastRow')[12], 8 );
         });

下面是我的 tr html 代码，其中值应该得到反映：

           <tr>
              <td id="finTotal">2251</td>`enter code here`
           <tr>

【问题讨论】：

你能在 jsfiddle 这样的在线代码编辑器中以某种方式重现它吗？
感谢您的回复，但我已经通过在数据表中添加表格页脚解决了这个问题

标签： javascript html ajax datatable

【解决方案1】：

I have solved this by using footer of datatable for performing sum of column of datatable

below is my jsp code:

<tfoot>

   <tr>

      <th colspan="8" style="text-align:right">Total:</th>


     <td id="finTotal">${employee.finTotal}</td>

     <td id="sumMonth1">${employee.sumMonth1}</td>

     <td id="sumMonth2">${employee.sumMonth2}</td>

     <td id="sumMonth3">${employee.sumMonth3}</td>

     <td id="sumMonth4">${employee.sumMonth4}</td>

     <td id="sumMonth5">${employee.sumMonth5}</td>

     <td id="sumMonth6">${employee.sumMonth6}</td>

     <td id="sumMonth7">${employee.sumMonth7}</td>

     <td id="sumMonth8">${employee.sumMonth8}</td>

     <td id="sumMonth9">${employee.sumMonth9}</td>

     <td id="sumMonth10">${employee.sumMonth10}</td>

     <td id="sumMonth11">${employee.sumMonth11}</td>

     <td id="sumMonth12">${employee.sumMonth12}</td>

 </tr>

And following is js code:


$('#tList1').dataTable({

        "columnDefs": [
            {"targets": 3,"width": "80px"},
            {"targets": 4,"width": "100px"}
        ],
        dom : 'lBfrtip',
        buttons : [
        /* 'excel', */
        {
            extend : 'excel',
            text : 'Export File',
            exportOptions : {
                modifier : {
                    selected : null
                }
            }
        }

        ],
        select : null,
        "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 all pages
            total = api
                .column( 8, { search: 'applied'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Update footer
            $( api.column( 8 ).footer() ).html(
                 total 
            );
        }

    });

【讨论】：