- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
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>
<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/
SQLite、Content provider 和 Shared Preference 之间的所有已知区别。 但我想知道什么时候需要根据情况使用 SQLite 或 Content Provider 或
警告:我正在使用一个我无法完全控制的后端,所以我正在努力解决 Backbone 中的一些注意事项,这些注意事项可能在其他地方更好地解决......不幸的是,我别无选择,只能在这里处理它们! 所以,我的
我一整天都在挣扎。我的预输入搜索表达式与远程 json 数据完美配合。但是当我尝试使用相同的 json 数据作为预取数据时,建议为空。点击第一个标志后,我收到预定义消息“无法找到任何内容...”,结果
我正在制作一个模拟 NHL 选秀彩票的程序,其中屏幕右侧应该有一个 JTextField,并且在左侧绘制弹跳的选秀球。我创建了一个名为 Ball 的类,它实现了 Runnable,并在我的主 Draf
这个问题已经有答案了: How can I calculate a time span in Java and format the output? (18 个回答) 已关闭 9 年前。 这是我的代码
我有一个 ASP.NET Web API 应用程序在我的本地 IIS 实例上运行。 Web 应用程序配置有 CORS。我调用的 Web API 方法类似于: [POST("/API/{foo}/{ba
我将用户输入的时间和日期作为: DatePicker dp = (DatePicker) findViewById(R.id.datePicker); TimePicker tp = (TimePic
放宽“邻居”的标准是否足够,或者是否有其他标准行动可以采取? 最佳答案 如果所有相邻解决方案都是 Tabu,则听起来您的 Tabu 列表的大小太长或您的释放策略太严格。一个好的 Tabu 列表长度是
我正在阅读来自 cppreference 的代码示例: #include #include #include #include template void print_queue(T& q)
我快疯了,我试图理解工具提示的行为,但没有成功。 1. 第一个问题是当我尝试通过插件(按钮 1)在点击事件中使用它时 -> 如果您转到 Fiddle,您会在“内容”内看到该函数' 每次点击都会调用该属
我在功能组件中有以下代码: const [ folder, setFolder ] = useState([]); const folderData = useContext(FolderContex
我在使用预签名网址和 AFNetworking 3.0 从 S3 获取图像时遇到问题。我可以使用 NSMutableURLRequest 和 NSURLSession 获取图像,但是当我使用 AFHT
我正在使用 Oracle ojdbc 12 和 Java 8 处理 Oracle UCP 管理器的问题。当 UCP 池启动失败时,我希望关闭它创建的连接。 当池初始化期间遇到 ORA-02391:超过
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 9 年前。 Improve
引用这个plunker: https://plnkr.co/edit/GWsbdDWVvBYNMqyxzlLY?p=preview 我在 styles.css 文件和 src/app.ts 文件中指定
为什么我的条形这么细?我尝试将宽度设置为 1,它们变得非常厚。我不知道还能尝试什么。默认厚度为 0.8,这是应该的样子吗? import matplotlib.pyplot as plt import
当我编写时,查询按预期执行: SELECT id, day2.count - day1.count AS diff FROM day1 NATURAL JOIN day2; 但我真正想要的是右连接。当
我有以下时间数据: 0 08/01/16 13:07:46,335437 1 18/02/16 08:40:40,565575 2 14/01/16 22:2
一些背景知识 -我的 NodeJS 服务器在端口 3001 上运行,我的 React 应用程序在端口 3000 上运行。我在 React 应用程序 package.json 中设置了一个代理来代理对端
我面临着一个愚蠢的问题。我试图在我的 Angular 应用程序中延迟加载我的图像,我已经尝试过这个2: 但是他们都设置了 src attr 而不是 data-src,我在这里遗漏了什么吗?保留 d
我是一名优秀的程序员,十分优秀!