Datatables возвращает только последнюю строку при выбранном событии

Question

var t
var tableData = {
  no: '',
  fullName: '',
  hire_date: '',
  position: '',
  salary: '',
  work_days: '',
  hourlyRate: '',
  hours6_to_10: '',
  amount_6_to_10: '',
  hours_10_to_6: '',
  amount_10_to_6: '',
  hours_week_off_days: '',
  amount_week_off_days: '',
  hours_pHoliday: '',
  amount_pHoliday: '',
  totalOT: '',
  phoneBill: '',
  travel: '',
  misc_allowances: '',
  totalEarnings: '',
  taxableIncome: '',
  incomeTax: '',
  pension_11: '',
  pension_7: '',
  costSharing: '',
  other_deductions: ''
}
$(document).ready(function() {
  t = $('#dataTable').DataTable({
    deferRender: true,
    scrollY: 200,
    scrollX: true,
    scrollCollapse: true,
    scroller: true,
    select: true,
    //"ajax": "../data.json",
    columns: [{
        "data": 'no'
      },
      {
        "data": 'fullName'
      },
      {
        "data": 'hire_date'
      },
      {
        "data": 'position'
      },
      {
        "data": 'salary'
      },
      {
        "data": 'work_days'
      },
      {
        "data": 'hourlyRate'
      },
      {
        "data": 'hours6_to_10'
      },
      {
        "data": 'amount_6_to_10'
      },
      {
        "data": 'hours_10_to_6'
      },
      {
        "data": 'amount_10_to_6'
      },
      {
        "data": 'hours_week_off_days'
      },
      {
        "data": 'amount_week_off_days'
      },
      {
        "data": 'hours_pHoliday'
      },
      {
        "data": 'amount_pHoliday'
      },
      {
        "data": 'totalOT'
      },
      {
        "data": 'phoneBill'
      },
      {
        "data": 'travel'
      },
      {
        "data": 'misc_allowances'
      },
      {
        "data": 'totalEarnings'
      },
      {
        "data": 'taxableIncome'
      },
      {
        "data": 'incomeTax'
      },
      {
        "data": 'pension_11'
      },
      {
        "data": 'pension_7'
      },
      {
        "data": 'costSharing'
      },
      {
        "data": 'other_deductions'
      }
    ]
  });

  $(".dataTables_filter").hide();

  $('#employeeFilter').keyup(function() {
    t.search($(this).val()).draw();
  })

  t.on('order.dt search.dt', function() {
    t.column(0, {
      search: 'applied',
      order: 'applied'
    }).nodes().each(function(cell, i) {
      cell.innerHTML = i + 1;
    });
  }).draw();

  $('#dataTable').on('click', 'tbody tr', function() {

    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
    } else {
      t.$('tr.selected').removeClass('selected');
      $(this).addClass('selected');
    }
    var rowData = t.row($(this)).data()
    var ind = t.row($(this)).index()

    console.log(JSON.stringify(rowData))

  });

  //In reality this is the ipcRenderer callback
  //ipcRenderer.on('hr_dataTable_ready', (event, rows) => {})
  //I used a mock here for simplification 
  // This is where the table data is obtained from a local     //database
  // 
  $.fn.getTableData = function() {
    var rows = [{
        "FIRST_NAME": "OPTIMUS",
        "LAST_NAME": "PRIME",
        "HIRED_ON": "6/14/2013",
        "CURRENT_POSITION": "Software Engineer",
        "BASIC_SALARY": 17999,
        "WORKING_DAYS": 6,
        "SIX_TO_TEN": 0,
        "TEN_TO_SIX": 0,
        "SPECIAL_DAYS": 0,
        "PUBLIC_HOLIDAY": 0,
        "PHONE_BILL": 0,
        "TRANSPORTATION": 0,
        "MISCELLANEOUS": 0,
        "INCOME_TAX": 0,
        "PENSION_11": 0,
        "PENSION_7": 0,
        "COST_SHARING": 0,
        "OTHER": 0
      },
      {
        "FIRST_NAME": "MIKE",
        "LAST_NAME": "TYSON",
        "HIRED_ON": "8/15/2014",
        "CURRENT_POSITION": "Electrical Engineer",
        "BASIC_SALARY": 21999,
        "WORKING_DAYS": 6,
        "SIX_TO_TEN": 0,
        "TEN_TO_SIX": 0,
        "SPECIAL_DAYS": 0,
        "PUBLIC_HOLIDAY": 0,
        "PHONE_BILL": 0,
        "TRANSPORTATION": 0,
        "MISCELLANEOUS": 0,
        "INCOME_TAX": 0,
        "PENSION_11": 0,
        "PENSION_7": 0,
        "COST_SHARING": 0,
        "OTHER": 0
      },
      {
        "FIRST_NAME": "LIONEL",
        "LAST_NAME": "MESSI",
        "HIRED_ON": "4/16/2015",
        "CURRENT_POSITION": "Software Engineer",
        "BASIC_SALARY": 17999,
        "WORKING_DAYS": 6,
        "SIX_TO_TEN": 0,
        "TEN_TO_SIX": 0,
        "SPECIAL_DAYS": 0,
        "PUBLIC_HOLIDAY": 0,
        "PHONE_BILL": 0,
        "TRANSPORTATION": 0,
        "MISCELLANEOUS": 0,
        "INCOME_TAX": 0,
        "PENSION_11": 0,
        "PENSION_7": 0,
        "COST_SHARING": 0,
        "OTHER": 0
      },
      {
        "FIRST_NAME": "RAFAEL",
        "LAST_NAME": "NADAL",
        "HIRED_ON": "5/17/2016",
        "CURRENT_POSITION": "Electrical Engineer",
        "BASIC_SALARY": 21999,
        "WORKING_DAYS": 6,
        "SIX_TO_TEN": 0,
        "TEN_TO_SIX": 0,
        "SPECIAL_DAYS": 0,
        "PUBLIC_HOLIDAY": 0,
        "PHONE_BILL": 0,
        "TRANSPORTATION": 0,
        "MISCELLANEOUS": 0,
        "INCOME_TAX": 0,
        "PENSION_11": 0,
        "PENSION_7": 0,
        "COST_SHARING": 0,
        "OTHER": 0
      },

    ]
    var i = 1 //exclude header
    rows.forEach((row) => {
      //create new row for each new record
      tableData.no = i
      tableData.fullName = row.FIRST_NAME + " " + row.LAST_NAME
      tableData.hire_date = row.HIRED_ON
      tableData.position = row.CURRENT_POSITION
      tableData.salary = row.BASIC_SALARY
      tableData.work_days = row.WORKING_DAYS
      tableData.hourlyRate = 0
      tableData.hours6_to_10 = row.SIX_TO_TEN
      tableData.amount_6_to_10 = row.SIX_TO_TEN
      tableData.hours_10_to_6 = row.TEN_TO_SIX
      tableData.amount_10_to_6 = row.TEN_TO_SIX
      tableData.hours_week_off_days = row.SPECIAL_DAYS
      tableData.amount_week_off_days = row.SPECIAL_DAYS
      tableData.hours_pHoliday = row.PUBLIC_HOLIDAY
      tableData.amount_pHoliday = row.PUBLIC_HOLIDAY
      tableData.totalOT = row.HIRED_ON
      tableData.phoneBill = row.PHONE_BILL
      tableData.travel = row.TRANSPORTATION
      tableData.misc_allowances = row.MISCELLANEOUS
      tableData.totalEarnings = 0
      tableData.taxableIncome = 0
      tableData.incomeTax = row.INCOME_TAX
      tableData.pension_11 = row.PENSION_11
      tableData.pension_7 = row.PENSION_7
      tableData.costSharing = row.COST_SHARING
      tableData.other_deductions = row.OTHER

      t.row.add(tableData).draw() // add new row
      i++
    })
  }
  // Added to simulate ipcRenderer callback action
  $(".call-btn").click(function() {
    $.fn.getTableData();
  });
})

.table,
th,
td {
  border: 1px solid #848484;
  text-align: center;
  font-family: Segoe UI;
  font-size: 12px;
  font-weight: bold;
}

.dataTables_scrollBody thead tr[role="row"] {
  visibility: collapse !important;
}

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>

  <table id="dataTable" class="display nowrap " style="width: 100%; ">
    <thead>
      <tr>
        <th></th>
        <th colspan="3">
          Basic Information</th>
        <th colspan="3">
          Earnings</th>
        <th colspan="2">
          6:00 am Morning - 10:00 pm Evening</th>
        <th colspan="2">
          10:00 pm Evening - 6:00 am Morning</th>
        <th colspan="2">
          Week Rest Days</th>
        <th colspan="3">
          Public Holidays</th>
        <th colspan="3">
          Allowances</th>
        <th colspan="6">
          Deductions</th>
        <th>
        </th>

      </tr>
      <tr>
        <th>NO</th>
        <th class="basicInfo">Full Name
        </th>
        <th class="basicInfo">Hire Date</th>
        <th class="basicInfo">Position</th>
        <th>Basic Salary</th>
        <th>Working Days</th>
        <th>Hourly Rate</th>
        <th>Hours</th>
        <th>Amount</th>
        <th>Hours</th>
        <th>Amount</th>
        <th>Hours</th>
        <th>Amount</th>
        <th>Hours</th>
        <th>Amount</th>
        <th>Total OT</th>
        <th>Mobile</th>
        <th>Transport</th>
        <th>Other</th>
        <th>Total Earning</th>
        <th>Taxable Income</th>
        <th>Income Tax</th>
        <th>Pension 11%</th>
        <th>Pension 7%</th>
        <th>Cost Sharing</th>
        <th>Other</th>
      </tr>
    </thead>
    <tbody style="
                  text-align: center;
                  font-family: Segoe UI;
                  font-weight: 500;
                  font-size: 14px;">
    </tbody>
  </table>
  <div style="float: right;">
    <button type="button" id="getData" class="call-btn">Get Data</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>


</body>

</html>

У меня есть таблица данных с динамически добавляемыми строками. Проблема заключается в том, что после запуска события выбора строки и попытки прочитать данные выбранной строки возвращается только содержимое последней строки. Если это помогает, данные загружаются из локальной базы данных. Вот часть кода ... `

HTML

      <table id="dataTable" class="display nowrap " style="width: 100%; ">
        <thead>
          <tr>
            <th></th>
            <th colspan="3">
              Basic Information</th>
            <th colspan="3">
              Earnings</th>
            <th colspan="2">
              6:00 am Morning - 10:00 pm Evening</th>
            <th colspan="2">
              10:00 pm Evening - 6:00 am Morning</th>
            <th colspan="2">
              Week Rest Days</th>`enter code here`
            <th colspan="3">
              Public Holidays</th>
            <th colspan="3">
              Allowances</th>
            <th colspan="6">
              Deductions</th>
            <th>
            </th>
          </tr>
          <tr>
            <th>NO</th>
            <th class="basicInfo">Full
              Name</th>
            <th class="basicInfo">Hire Date</th>
            <th class="basicInfo">Position</th>
            <th>Basic Salary</th>
            <th>Working Days</th>
            <th>Hourly Rate</th>
            <th>Hours</th>
            <th>Amount</th>
            <th>Hours</th>
            <th>Amount</th>
            <th>Hours</th>
            <th>Amount</th>
            <th>Hours</th>
            <th>Amount</th>
            <th>Total OT</th>
            <th>Phone</th>
            <th>Travel</th>
            <th>Other</th>
            <th>Total Earnings</th>
            <th>Taxable Income</th>
            <th>Income Tax</th>
            <th>Pension 11%</th>
            <th>Pension 7%</th>
            <th>Cost Sharing</th>
            <th>Other</th>
          </tr>
        </thead>
        <tbody style="
              text-align: center;
              font-family: Segoe UI;
              font-weight: 500;
              font-size: 14px;">
        </tbody>
      </table>

Renderer. js

    var t
    var tableData = {
        no: '',
        fullName: '',
        hire_date: '',
        position: '',
        salary: '',
        work_days: '',
        hourlyRate: '',
        hours6_to_10: '',
        amount_6_to_10: '',
        hours_10_to_6: '',
        amount_10_to_6: '',
        hours_week_off_days: '',
        amount_week_off_days: '',
        hours_pHoliday: '',
        amount_pHoliday: '',
        totalOT: '',
        phoneBill: '',
        travel: '',
        misc_allowances: '',
        totalEarnings: '',
        taxableIncome: '',
        incomeTax: '',
        pension_11: '',
        pension_7: '',
        costSharing: '',
        other_deductions: ''
    }
        $(document).ready(function () {
            var selected = []
            t = $('#dataTable').DataTable({
        
                deferRender: true,
                scrollY: 200,
                scrollX: true,
                scrollCollapse: true,
                scroller: true,
                select: true,
                //"ajax": "../data.json",
                columns: [
                    { "data": 'no' },
                    { "data": 'fullName' },
                    { "data": 'hire_date' },
                    { "data": 'position' },
                    { "data": 'salary' },
                    { "data": 'work_days' },
                    { "data": 'hourlyRate' },
                    { "data": 'hours6_to_10' },
                    { "data": 'amount_6_to_10' },
                    { "data": 'hours_10_to_6' },
                    { "data": 'amount_10_to_6' },
                    { "data": 'hours_week_off_days' },
                    { "data": 'amount_week_off_days' },
                    { "data": 'hours_pHoliday' },
                    { "data": 'amount_pHoliday' },
                    { "data": 'totalOT' },
                    { "data": 'phoneBill' },
                    { "data": 'travel' },
                    { "data": 'misc_allowances' },
                    { "data": 'totalEarnings' },
                    { "data": 'taxableIncome' },
                    { "data": 'incomeTax' },
                    { "data": 'pension_11' },
                    { "data": 'pension_7' },
                    { "data": 'costSharing' },
                    { "data": 'other_deductions' }
                ]
            });
        $('#dataTable').on('click', 'tbody tr', function () {
        
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    t.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
                var rowData = t.row($(this)).data() //=> Every time,the last 
                                                    //row's data is returned
                var ind = t.row($(this)).index() // However, the correct row 
                                                 // index is read here
        
                console.log(JSON.stringify(rowData))
        
        });

        ipcRenderer.on('dataTable_ready', (event, rows) => {
        console.log(JSON.stringify(rows))
        var i = 1
        if (null != rows) {
            if (Array.isArray(rows)) {
                rows.forEach((row) => {
                    //create new row for each new record
                    tableData.no = i
                    tableData.fullName = row.FIRST_NAME + " " + row.LAST_NAME
                    tableData.hire_date = row.HIRED_ON
                    tableData.position = row.CURRENT_POSITION
                    tableData.salary = row.BASIC_SALARY
                    tableData.work_days = row.WORKING_DAYS
                    tableData.hourlyRate = 0
                    tableData.hours6_to_10 = row.SIX_TO_TEN
                    tableData.amount_6_to_10 = row.SIX_TO_TEN
                    tableData.hours_10_to_6 = row.TEN_TO_SIX
                    tableData.amount_10_to_6 = row.TEN_TO_SIX
                    tableData.hours_week_off_days = row.SPECIAL_DAYS
                    tableData.amount_week_off_days = row.SPECIAL_DAYS
                    tableData.hours_pHoliday = row.PUBLIC_HOLIDAY
                    tableData.amount_pHoliday = row.PUBLIC_HOLIDAY
                    tableData.totalOT = row.HIRED_ON
                    tableData.phoneBill = row.PHONE_BILL
                    tableData.travel = row.TRANSPORTATION
                    tableData.misc_allowances = row.MISCELLANEOUS
                    tableData.totalEarnings = 0
                    tableData.taxableIncome = 0
                    tableData.incomeTax = row.INCOME_TAX
                    tableData.pension_11 = row.PENSION_11
                    tableData.pension_7 = row.PENSION_7
                    tableData.costSharing = row.COST_SHARING
                    tableData.other_deductions = row.OTHER

                    t.row.add(tableData).draw()//=> Add row
                    i++
                })
            }

Любая помощь приветствуется.

Answer 1

Ваша проблема в методе getTableData.

Во-первых, вы должны инициализировать tableData внутри для, вам не нужно использовать глобальную переменную. -> Проблема 1 в коде

Во-вторых, используйте invalidate (я не знаю, это абсолютно необходимо) для аннулирования кешированных данных в строках и, в в конце используйте table.draw. -> Проблема 2 в коде

$.fn.getTableData = function() {
    var rows = [{
        "FIRST_NAME": "OPTIMUS",
        "LAST_NAME": "PRIME",
        "HIRED_ON": "6/14/2013",
        "CURRENT_POSITION": "Software Engineer",
        "BASIC_SALARY": 17999,
        "WORKING_DAYS": 6,
        "SIX_TO_TEN": 0,
        "TEN_TO_SIX": 0,
        "SPECIAL_DAYS": 0,
        "PUBLIC_HOLIDAY": 0,
        "PHONE_BILL": 0,
        "TRANSPORTATION": 0,
        "MISCELLANEOUS": 0,
        "INCOME_TAX": 0,
        "PENSION_11": 0,
        "PENSION_7": 0,
        "COST_SHARING": 0,
        "OTHER": 0
      },
      {
        "FIRST_NAME": "MIKE",
        "LAST_NAME": "TYSON",
        "HIRED_ON": "8/15/2014",
        "CURRENT_POSITION": "Electrical Engineer",
        "BASIC_SALARY": 21999,
        "WORKING_DAYS": 6,
        "SIX_TO_TEN": 0,
        "TEN_TO_SIX": 0,
        "SPECIAL_DAYS": 0,
        "PUBLIC_HOLIDAY": 0,
        "PHONE_BILL": 0,
        "TRANSPORTATION": 0,
        "MISCELLANEOUS": 0,
        "INCOME_TAX": 0,
        "PENSION_11": 0,
        "PENSION_7": 0,
        "COST_SHARING": 0,
        "OTHER": 0
      },
      {
        "FIRST_NAME": "LIONEL",
        "LAST_NAME": "MESSI",
        "HIRED_ON": "4/16/2015",
        "CURRENT_POSITION": "Software Engineer",
        "BASIC_SALARY": 17999,
        "WORKING_DAYS": 6,
        "SIX_TO_TEN": 0,
        "TEN_TO_SIX": 0,
        "SPECIAL_DAYS": 0,
        "PUBLIC_HOLIDAY": 0,
        "PHONE_BILL": 0,
        "TRANSPORTATION": 0,
        "MISCELLANEOUS": 0,
        "INCOME_TAX": 0,
        "PENSION_11": 0,
        "PENSION_7": 0,
        "COST_SHARING": 0,
        "OTHER": 0
      },
      {
        "FIRST_NAME": "RAFAEL",
        "LAST_NAME": "NADAL",
        "HIRED_ON": "5/17/2016",
        "CURRENT_POSITION": "Electrical Engineer",
        "BASIC_SALARY": 21999,
        "WORKING_DAYS": 6,
        "SIX_TO_TEN": 0,
        "TEN_TO_SIX": 0,
        "SPECIAL_DAYS": 0,
        "PUBLIC_HOLIDAY": 0,
        "PHONE_BILL": 0,
        "TRANSPORTATION": 0,
        "MISCELLANEOUS": 0,
        "INCOME_TAX": 0,
        "PENSION_11": 0,
        "PENSION_7": 0,
        "COST_SHARING": 0,
        "OTHER": 0
      },

    ]
    var i = 1 //exclude header
    rows.forEach((row) => {
      var tableData = {   // Problem 1
      no: '',
      fullName: '',
      hire_date: '',
      position: '',
      salary: '',
      work_days: '',
      hourlyRate: '',
      hours6_to_10: '',
      amount_6_to_10: '',
      hours_10_to_6: '',
      amount_10_to_6: '',
      hours_week_off_days: '',
      amount_week_off_days: '',
      hours_pHoliday: '',
      amount_pHoliday: '',
      totalOT: '',
      phoneBill: '',
      travel: '',
      misc_allowances: '',
      totalEarnings: '',
      taxableIncome: '',
      incomeTax: '',
      pension_11: '',
      pension_7: '',
      costSharing: '',
      other_deductions: ''
    }
      //create new row for each new record
      tableData.no = i
      tableData.fullName = row.FIRST_NAME + " " + row.LAST_NAME
      tableData.hire_date = row.HIRED_ON
      tableData.position = row.CURRENT_POSITION
      tableData.salary = row.BASIC_SALARY
      tableData.work_days = row.WORKING_DAYS
      tableData.hourlyRate = 0
      tableData.hours6_to_10 = row.SIX_TO_TEN
      tableData.amount_6_to_10 = row.SIX_TO_TEN
      tableData.hours_10_to_6 = row.TEN_TO_SIX
      tableData.amount_10_to_6 = row.TEN_TO_SIX
      tableData.hours_week_off_days = row.SPECIAL_DAYS
      tableData.amount_week_off_days = row.SPECIAL_DAYS
      tableData.hours_pHoliday = row.PUBLIC_HOLIDAY
      tableData.amount_pHoliday = row.PUBLIC_HOLIDAY
      tableData.totalOT = row.HIRED_ON
      tableData.phoneBill = row.PHONE_BILL
      tableData.travel = row.TRANSPORTATION
      tableData.misc_allowances = row.MISCELLANEOUS
      tableData.totalEarnings = 0
      tableData.taxableIncome = 0
      tableData.incomeTax = row.INCOME_TAX
      tableData.pension_11 = row.PENSION_11
      tableData.pension_7 = row.PENSION_7
      tableData.costSharing = row.COST_SHARING
      tableData.other_deductions = row.OTHER

      t.row.add(tableData) // add new row
      i++
    })
    
    // Update all rows in the table, redrawing only when complete:
    // Problem 2
    t.rows().every( function () {        
        this.invalidate(); // invalidate the data DataTables has cached for this row
    } );
    t.draw();
  }