gpt4 book ai didi

jquery - 数据表仅在选择事件时返回最后一行

转载 作者:行者123 更新时间:2023-12-03 12:25:23 24 4
gpt4 key购买 nike

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++
})
}
任何帮助是极大的赞赏。

最佳答案

您的问题出在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();
}

关于jquery - 数据表仅在选择事件时返回最后一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63260153/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com