使用查询（HTML表）添加数据从JSON网址添加数据 [英] Adding data from JSON url using messes up with a query (HTML table)
本文介绍了使用查询（HTML表）添加数据从JSON网址添加数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
简要说明：
01）我将JSON网址中的数据动态加载到HTML表格中。该脚本位于 HTML 文件头部中调用的外部 .js 文件中。
02）我使用第三列（MAIN VALUE）页面顶部的过滤器过滤结果。当我有静态数据时，脚本工作正常。自从我开始从JSON url动态地拉动表数据以来，它就停止工作了。
JS脚本在这里：
//它从JSON文件
$ .getJSON（
'http://apolosiskos.co.uk/TEB/MOCK_DATA）加载数据。 json'，
函数（数据）{
var tr;
//它将数据从JSON文件加载到表
$ .each（data，function（key，val ）{
tr = $（'< tr />'）;
tr.append（'< td class =name ='+ val.first_name +'> '+ val.first_name +'< / td>'）;
tr.append（'< td>'+'TEST'+'< / td>'）;
tr。 append（'< td class =metric2>'+ val.id +'< / td>'）;
tr.append（'< td class =metric3>< span class =multTotal>'+'0.00'+'< / span>< / td>'）;
tr.append（'< ; td class =metric3-100>< span class =metric3-100>'+'0.00'+'< / span>< / td>'）;
tr.append（'< td class =metric1-100>< span class =metric1-100>'+'0.00'+'< / span>< / td> ）;
$（'table'）。append（tr）;
}）;
$（input）。keyup（minmax）;
//我甚至尝试了下面的代码，但是没有工作
$（'body'）。on（'input'，'＃counter-low，＃counter-high'，minmax）;
}）;
// MAIN VALUE列中MIN MAX值的过滤函数
函数minmax（）{
var table = $（'table'）。DataTable（）;
$ .fn.dataTable.ext.search.push（function（settings，data，dataIndex）{
return parseFloat（data [2]）> = parseFloat（$（'＃counter-low' ）.val（）|| data [2]）
&&& parseFloat（data [2]）< = parseFloat（$（'＃counter-high'）.val（）|| data [2 ]）
}）;
$（'＃counter-low，＃counter-high'）。on（'keyup'，table.draw）;
}
UPD ：我粘贴代码在下面的答案之后：
$（function（）{
//它将数据从JSON文件
$ .getJSON（
'http://apolosiskos.co.uk/TEB/MOCK_DATA.json'，
函数（数据）{
var tr;
//它将JSON文件中的数据加载到表中
$ .each（data，function（key，val）{
tr = $（'< tr />'）;
tr.append（'< td class =name ='+ val.first_name +'>'+ val.first_name +'< / td>'）;
tr .append（'< td>< input class =metric1/>'+'< / td>'）;
tr.append（'< td class =metric2> '+ val.id +'< / td>'）;
tr.append（'< td class =metric3>< span class =multTotal>'+'0.00'+ '< / span>< / td>'）;
tr.append（'< td class =metric3-100> lt; span class =metric3-100>'+'0.00'+'< / span>< / td>'）;
tr.append（'< td class =metric1-100>< span class =metric1-100>'+'0.00'+'< / span>< / td> ）;
$（'table'）。append（tr）;
}）;
//将dimension1从JSON文件加载到过滤器
$ .each（data，function（key，val）{
li = $（'< li />'） ;
li.append（'< input rel =nametype =checkboxvalue ='+ val.first_name +'>< label for =cb1>'+ val。 first_name +'< / label>< / li>'）;
$（'ul'）。append（li）;
}）;
$（'。counter'）。keyup（minmax）; （'input'，'input：checkbox'，filters）;
$（'body'）。
}）;
}）;
//单元格函数的乘法
函数multInputs（）{
var mult = 0;
$（tr）。each（function（）{
var $ val1 = $（'。metric1'，this）.val（）;
var $ val2 = $（' .metric2'，this）.text（）;
var $ total =（$ val1 * 1）* $ val2 - $ val1;
$（'。multTotal'，this）.text（$ total .toPrecision（3））;
var $ val3 = $（'。multTotal'，this）.text（）;
var $ total2 = $ val3 / 100
$ （'.metric3-100'，this）.text（$ total2.toPrecision（3））;
var $ total3 = $ val1 / 100
$（'。metric1-100' ，this）.text（$ total3.toPrecision（2））;
mult + = $ total;
}）;
//为Dimension1值过滤函数
函数filters（）{
var showAll = true;
$（'tr'）。not（'。first'）。hide（）;
$（'input [type = checkbox]'）。each（function（）{
if（$（this）[0] .checked）{
showAll = false;
var dimension1 = $（this）.attr（'rel'）;
var value = $（this）.val（）;
$（'td。'+ dimension1 +'[rel ='' +'value +']'）。parent（'tr'）。show（）;
}
}）;
if（showAll）{
$（'tr'）。show（）;
// MAIN VALUE列中MIN MAX值的过滤函数
函数minmax（）{
var table = $ （ '表'）数据表（）;
$ .fn.dataTable.ext.search.push（function（settings，data，dataIndex）{
return parseFloat（data [2]）> = parseFloat（$（'＃counter-low' ）.val（）|| data [2]）
&&& parseFloat（data [2]）< = parseFloat（$（'＃counter-high'）.val（）|| data [2 ]）
}）;
$（'＃counter-low，＃counter-high'）。on（'keyup'，table.draw）;
解决方案
已经下载了你的html，json和js。
然后我有3个变化。
- 我把所有内容放在
$（function（）{ }};给JS在整个DOM被加载后执行所有的事情。 -
在最小和最大输入中添加一个类， p>
< input id =counter-minclass =counter/>
< input id =counter-maxclass =counter/>
和js设置为 $（'。counter'）。keyup（minmax）;将这个minmax作为你已经创建的函数;
-
/ p>
< table>
< thead>
< tr id =ProductIDclass =first>
< th> NAME< / th>
< th> INPUT< / th>
主要价值< / th>
DIFF< / th>
DIFF / 100< th>
MV / 100< th>
< / tr>
< / thead>
< tbody> < / tbody的>
< / table>
，我不知道是否是
第二次编辑
我在这里做了，我刚刚评论过你getJson将数据直接添加到表中，然后执行我之前说过的内容：
$ b <1> - 使用 $（function（）{ ...}）;
2 - 在counter-high和counter-low上添加类，只需将事件附加到它们上面（<.cName>）。keyup（minmax）;
和
3 - 在表格中添加thead和tbody元素
//它载入来自JSON文件的数据$（function（）{var data = [{id：2.2，first_name：Debra，last_name：Rodriguez，email：drodriguez0@admin.ch gende R ： 女 IP_ADDRESS： 90.22.159.108}，{ ID：2， FIRST_NAME： 朱莉， 姓氏： 林奇， 电子邮件： jlynch1 @ tumblr。 COM 性别： 女， IP_ADDRESS： 54.182.62.180}，{ ID：3， FIRST_NAME： 诺玛， 姓氏： 华盛顿， 电子邮件： nwashington2@theatlantic.com 性别： 女， IP_ADDRESS： 70.163.106.64}，{ ID：4， FIRST_NAME： 鲍比， 姓氏： 卡斯蒂略，电子邮件 ： bcastillo3@nbcnews.com 性别： 男， IP_ADDRESS： 91.202.59.171}，{ ID：5， FIRST_NAME： 亨利， 姓氏：查韦斯 电子邮件： hchavez4@chronoengine.com， 性别： 男， IP_ADDRESS： 32.237.37.185}，{ ID：6， FIRST_NAME： 德布拉，姓氏 ： 霍华德 电子邮件： showard5@stumbleupon.com， 性别： 女， IP_ADDRESS： 17.217.42.49}，{ ID：7， FIRST_NAME：杰森， 姓氏： 鲍威尔， 电子邮件： jpowell6@telegraph.co.uk， 性别： 男， IP_ADDRESS： 14.81.195.117}，{ ID：8 FIRST_NAME： 肖恩， 姓氏： 烧伤， 电子邮件： sburns7@hp.com， 性别： 男， IP_ADDRESS： 213.164.85.212}，{ ID ：9， FIRST_NAME ： 杰奎琳， 姓氏 ： 戈登， 电子邮件： jgordon8@bloglines.com， 性别： 女， IP_ADDRESS： 18.251.62.55}，{ ID：10， FIRST_NAME： 拉塞尔 ， 姓氏： 理查兹， 电子邮件： rrichards9@com.com， 性别： 男， IP_ADDRESS： 27.226.59.80}，{ ID：11， FIRST_NAME 伟业， 姓氏： 珀金斯， 电子邮件： aperkinsa@hc360.com， 性别： 男， IP_ADDRESS： 243.122.251.248}，{ ID：12 FIRST_NAME： 迈克尔， 姓氏： 威利斯， 电子邮件： mwillisb@deviantart.com， 性别： 男， IP_ADDRESS： 252.197.211.230}，{ ID ：13， FIRST_NAME ： 琼， 姓氏： 汉密尔顿， 电子邮件： jhamiltonc@weebly.com， 性别： 女， IP_ADDRESS： 204.70.110.117 }，{ ID：14， FIRST_NAME： 埃里克， 姓氏： 加西亚， 电子邮件： egarciad@yahoo.co.jp， 性别： 男， IP_ADDRESS ： 178.221.216.3}，{ ID：15， FIRST_NAME： 弗兰克， 姓氏： 奥尔森， 电子邮件： folsone@amazon.co.uk， 性别：男 IP_ADDRESS： 245.25.170.33}，{ ID：16， FIRST_NAME： 凯莉， 姓氏： 富勒， 电子邮件： kfullerf@tripod.com，性别 ： 女， IP_ADDRESS： 199.209.173.51 }，{ ID：17， FIRST_NAME： 弗兰克， 姓氏： 煮， 电子邮件： fcookg@google.com， 性别： 男， IP_ADDRESS： 58.30.243.1 }，{ ID ：18， FIRST_NAME ： 阿兰 姓氏： 大米， 电子邮件： ariceh@sciencedirect.com， 性别： 男， IP_ADDRESS ： 44.231.199.117 }，{ ID ：19， FIRST_NAME ： 马克 姓氏： 格林， 电子邮件： mgreenei@paypal.com， 性别：男 IP_ADDRESS： 45.34.44.2}，{ ID：20， FIRST_NAME： 查尔斯， 姓氏： 王， 电子邮件： ckingj@clickbank.net，性别 ： 男， IP_ADDRESS： 237.30.205.186}]; // $。getJSON（//'http://apolosiskos.co.uk/TEB/MOCK_DATA.json'，// function（data）{var tr; //它将数据从JSON文件加载到表$中。每个（数据，函数（key，val）{tr = $（'< tr />'）; tr.append（'< td class =name ='+ val.first_name +'> （'< / td>'）; tr.append（'< td> =metric2>'+ val.id +'< / td>'）; tr.append（'< td class =metric3>< span class =multTotal>'+'0.00 '+'< / span>< / td>'）; tr.append（'< td class =metric3-100>< span class =metric3-100>'+'0.00' +'< / span>< / td>'）; tr.append（'< td class =metric1-100>< span class =metric1-100>'+'0.00' '< / span>< / td>'）; $（'t （'click'，'input [type = checkbox]'，minmax）;}（）; $（反）KEYUP（MINMAX）。 $（输入）KEYUP（multInputs）; $（'body'）。on（'click'，'#btnFilter'，filtermin）;第一列（NAME）的过滤函数//必须一起使用minmax函数过滤器（）{//如果有人被选中，则返回true以显示所有var checkboxChecked = $（ '输入[类型=复选框]：检查'）; if（checkboxChecked.length< = 0）{$（'tr'）。show（）;返回true; 。} $（ TR）不是（第一）隐藏（）; //函数（）{var dimension1 = $（this）.attr（'rel'）; var value = $（this）.val（）; //找到名称检查并验证名称传递为参数checkboxChecked.each ; $（'td。'+ dimension1 +'[rel =''+ value +']'）。parent（'tr'）。show（）;}）;} //单元格函数multiplication multipInputs（） {var mult = 0; $（tr）。each（function（）{var $ val1 = $（'。metric1'，this）.val（）; var $ val2 = $（'。metric2'，this）.text（）; var $ total =（$ val1 * 1）* $ val2 - $ val1; $（'。multTotal'，this）.text（$ total.toPrecision（3））; var $ val3 = $（'。multTotal'，this） .text（）; var $ total2 = $ val3 / 100 $（'。metric3-100'，this）.text（$ total2.toPrecision（3））; var $ total3 = $ val1 / 100 $（'。metric1- 100），this）.text（$ total3.toPrecision（2））; mult + = $ total;}）;} // MAIN VALUE列函数中MIN MAX值的过滤器函数minmax（）{filters（）; $ .fn.dataTable.ext.search.push（function（settings，data，dataIndex）{return parseFloat（data [2]）> = parseFloat（$（'＃counter-low'）。val（）|| data [2]）&& parseFloat（data [2]）< = parseFloat（$（'＃counter-high'）.val（）|| data [2]）;}）; var table = $（'table'）.DataTable（）; $（'＃counter-low，＃counter-high'）。on（'keyup'，table.draw）;} function filtermin（）{var value = $（'＃filter'）。val（）; $（ TR）显示（）。 $（'tr td.odds'）。each（function（）{if（$（this）.text（）< value）{$（this）.parent（）。hide（）;}}）;}
< head> < meta charset =utf-8> < meta http-equiv =Access-Control-Allow-Origincontent =*/>数据文件表中的< title> json提取< / title> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js>< / script> < script src =https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js>< / script> < script type =text / javascriptlanguage =javascriptsrc =teste.js>< / script> < link rel =stylesheethref =css / main.css/> < style href =https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css>< / style>< / head>< body> < h1>在JSON中提取数据之后的差异检查器< / h1> < HR /> < div class =row> < div class =col-sm-4 filter-columns> < div class =ac-custom ac-checkbox ac-crossautocomplete =off> < H2> DIMENSION1< / H2> < UL> < li>< input rel =nametype =checkboxvalue =Debraid =cb1>< label for =cb1> Debra< / label>< / li> < li>< input rel =nametype =checkboxvalue =Julieid =cb2>< label for =cb2> Julie< / label>< / li> < li>< input rel =nametype =checkboxvalue =Normaid =cb3>< label for =cb3> Norma< / label>< / li> < li>< input rel =nametype =checkboxvalue =Bobbyid =cb4>< label for =cb4> Bobby< / label>< / li> < li>< input rel =nametype =checkboxvalue =Henryid =cb5>< label for =cb5> Henry< / label>< / li> < / UL> < / DIV> < / DIV> < div class =col-sm-4 filter-columns-alt> < div class =ac-custom ac-checkbox ac-crossautocomplete =off> < h2> MIN MAX< / h2> Min：< input id =counter-lowclass =countertype =text/> &安培; NBSP; Max：< input id =counter-highclass =countertype =text/> < / DIV> < / DIV> < div class =col-sm-4 filter-columns-alt> < input type ='text'id ='filter'/> < button id ='btnFilter'> Go< / button> < / DIV> < / DIV> < div id =body> <表> < THEAD> < tr id =ProductIDclass =first> <的第i; NAME< /第> <的第i; INPUT< /第> < th>主值< / th> <的第i; DIFF< /第>第DIFF / 100第第MV / 100分钟。 < / TR> < / THEAD> < TBODY>< / tbody的> < /表> < / body>
A short description :
01) I dynamically load data from a JSON url into an HTML table. The script is in the external .js file called in the header of the HTML file.
02) I filter the results using a filter at the top of the page for the third column (MAIN VALUE). The script worked fine when I had static data. It stopped working ever since I started pullimg the table data dynamically from a JSON url.
And the JS script is here :
//It loads the data from the JSON file
$.getJSON(
'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
function(data){
var tr;
//It loads data from the JSON file to the table
$.each (data, function (key, val) {
tr = $('<tr/>');
tr.append('<td class="name" rel="' + val.first_name + '">' + val.first_name + '</td>');
tr.append('<td >' + 'TEST' + '</td>');
tr.append('<td class="metric2" >' + val.id + '</td>');
tr.append('<td class="metric3"><span class="multTotal">' +'0.00'+ '</span></td>');
tr.append('<td class="metric3-100"><span class="metric3-100">' +'0.00'+ '</span></td>');
tr.append('<td class="metric1-100"><span class="metric1-100">' +'0.00'+ '</span></td>');
$('table').append(tr);
});
$("input").keyup(minmax);
//I even tried the below but did not work
$('body').on('input', '#counter-low, #counter-high', minmax);
});
//The filter function for the MIN MAX values in the MAIN VALUE column
function minmax() {
var table = $('table').DataTable();
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
return parseFloat(data[2]) >= parseFloat($('#counter-low').val() || data[2])
&& parseFloat(data[2]) <= parseFloat($('#counter-high').val() || data[2])
});
$('#counter-low, #counter-high').on('keyup', table.draw);
}
UPD: I paste the code here that works after an answer below :
$(function(){
//It loads the data from the JSON file
$.getJSON(
'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
function(data){
var tr;
//It loads data from the JSON file to the table
$.each (data, function (key, val) {
tr = $('<tr/>');
tr.append('<td class="name" rel="' + val.first_name + '">' + val.first_name + '</td>');
tr.append('<td ><input class="metric1"/>' + '</td>');
tr.append('<td class="metric2" >' + val.id + '</td>');
tr.append('<td class="metric3"><span class="multTotal">' +'0.00'+ '</span></td>');
tr.append('<td class="metric3-100"><span class="metric3-100">' +'0.00'+ '</span></td>');
tr.append('<td class="metric1-100"><span class="metric1-100">' +'0.00'+ '</span></td>');
$('table').append(tr);
});
//It loads dimension1 from the JSON file to the filter
$.each (data, function (key, val) {
li = $('<li/>');
li.append('<input rel="name" type="checkbox" value="' + val.first_name + '"><label for="cb1">' + val.first_name + '</label></li>');
$('ul').append(li);
});
$('.counter').keyup(minmax);
$('body').on('input click', 'input:checkbox', filters);
});
});
//Multiplication of the cells function
function multInputs() {
var mult = 0;
$("tr").each(function () {
var $val1 = $('.metric1', this).val();
var $val2 = $('.metric2', this).text();
var $total = ($val1 * 1) * $val2 - $val1;
$('.multTotal', this).text($total.toPrecision(3));
var $val3 = $('.multTotal', this).text();
var $total2 = $val3 / 100
$('.metric3-100',this).text($total2.toPrecision(3));
var $total3 = $val1 / 100
$('.metric1-100',this).text($total3.toPrecision(2));
mult += $total;
});
}
//Filter function for the Dimension1 values
function filters() {
var showAll = true;
$('tr').not('.first').hide();
$('input[type=checkbox]').each(function () {
if ($(this)[0].checked) {
showAll = false;
var dimension1= $(this).attr('rel');
var value = $(this).val();
$('td.' + dimension1+ '[rel="' + value + '"]').parent('tr').show();
}
});
if(showAll){
$('tr').show();
}
}
//The filter function for the MIN MAX values in the MAIN VALUE column
function minmax() {
var table = $('table').DataTable();
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
return parseFloat(data[2]) >= parseFloat($('#counter-low').val() || data[2])
&& parseFloat(data[2]) <= parseFloat($('#counter-high').val() || data[2])
});
$('#counter-low, #counter-high').on('keyup', table.draw);
}
解决方案
So, answering here, I have downloaded your html, json and js. And then I had 3 changes.
- I put everything inside the
$(function(){});to JS execute everything just after the entire DOM is loaded. Add a class in both of min and max input like:
<input id="counter-min" class="counter"/><input id="counter-max" class="counter"/>
and in js set up to $('.counter').keyup( minmax ); having this minmax as a function you already created;
I put the table html like this one:
<table> <thead> <tr id="ProductID" class="first"> <th>NAME</th> <th>INPUT</th> <th>MAIN VALUE</th> <th>DIFF</th> <th>DIFF /100</th> <th>MV /100</th> </tr> </thead> <tbody> </tbody> </table>
So, that's have worked for me, I don't know if is
EDIT, for the second time I do it here, I just have commented your getJson to add the data directly on your table and then, I did what I said before:
1 - use the $(function() { .. });
2 - add classes on the counter-high and counter-low, just to attach the event to them and then attached the event with $('.className').keyup( minmax );
and
3 - add the thead and tbody elements in the table
//It loads the data from the JSON file
$(function() {
var data = [{"id":2.2,"first_name":"Debra","last_name":"Rodriguez","email":"drodriguez0@admin.ch","gender":"Female","ip_address":"90.22.159.108"},
{"id":2,"first_name":"Julie","last_name":"Lynch","email":"jlynch1@tumblr.com","gender":"Female","ip_address":"54.182.62.180"},
{"id":3,"first_name":"Norma","last_name":"Washington","email":"nwashington2@theatlantic.com","gender":"Female","ip_address":"70.163.106.64"},
{"id":4,"first_name":"Bobby","last_name":"Castillo","email":"bcastillo3@nbcnews.com","gender":"Male","ip_address":"91.202.59.171"},
{"id":5,"first_name":"Henry","last_name":"Chavez","email":"hchavez4@chronoengine.com","gender":"Male","ip_address":"32.237.37.185"},
{"id":6,"first_name":"Debra","last_name":"Howard","email":"showard5@stumbleupon.com","gender":"Female","ip_address":"17.217.42.49"},
{"id":7,"first_name":"Jason","last_name":"Powell","email":"jpowell6@telegraph.co.uk","gender":"Male","ip_address":"14.81.195.117"},
{"id":8,"first_name":"Sean","last_name":"Burns","email":"sburns7@hp.com","gender":"Male","ip_address":"213.164.85.212"},
{"id":9,"first_name":"Jacqueline","last_name":"Gordon","email":"jgordon8@bloglines.com","gender":"Female","ip_address":"18.251.62.55"},
{"id":10,"first_name":"Russell","last_name":"Richards","email":"rrichards9@com.com","gender":"Male","ip_address":"27.226.59.80"},
{"id":11,"first_name":"Albert","last_name":"Perkins","email":"aperkinsa@hc360.com","gender":"Male","ip_address":"243.122.251.248"},
{"id":12,"first_name":"Michael","last_name":"Willis","email":"mwillisb@deviantart.com","gender":"Male","ip_address":"252.197.211.230"},
{"id":13,"first_name":"Joan","last_name":"Hamilton","email":"jhamiltonc@weebly.com","gender":"Female","ip_address":"204.70.110.117"},
{"id":14,"first_name":"Eric","last_name":"Garcia","email":"egarciad@yahoo.co.jp","gender":"Male","ip_address":"178.221.216.3"},
{"id":15,"first_name":"Frank","last_name":"Olson","email":"folsone@amazon.co.uk","gender":"Male","ip_address":"245.25.170.33"},
{"id":16,"first_name":"Kelly","last_name":"Fuller","email":"kfullerf@tripod.com","gender":"Female","ip_address":"199.209.173.51"},
{"id":17,"first_name":"Frank","last_name":"Cook","email":"fcookg@google.com","gender":"Male","ip_address":"58.30.243.1"},
{"id":18,"first_name":"Alan","last_name":"Rice","email":"ariceh@sciencedirect.com","gender":"Male","ip_address":"44.231.199.117"},
{"id":19,"first_name":"Mark","last_name":"Greene","email":"mgreenei@paypal.com","gender":"Male","ip_address":"45.34.44.2"},
{"id":20,"first_name":"Charles","last_name":"King","email":"ckingj@clickbank.net","gender":"Male","ip_address":"237.30.205.186"}];
//$.getJSON(
//'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
//function(data) {
var tr;
//It loads data from the JSON file to the table
$.each(data, function(key, val) {
tr = $('<tr/>');
tr.append('<td class="name" rel="' + val.first_name + '">' + val.first_name + '</td>');
tr.append('<td >' + 'TEST' + '</td>');
tr.append('<td class="metric2" >' + val.id + '</td>');
tr.append('<td class="metric3"><span class="multTotal">' + '0.00' + '</span></td>');
tr.append('<td class="metric3-100"><span class="metric3-100">' + '0.00' + '</span></td>');
tr.append('<td class="metric1-100"><span class="metric1-100">' + '0.00' + '</span></td>');
$('table').append(tr);
});
$('body').on('click', 'input[type=checkbox]', minmax);
$('.counter').keyup(minmax);
$('input').keyup(multInputs);
$('body').on('click', '#btnFilter', filtermin);
});
//});
//The filter function for the first column (NAME)
//This have to work together of the minmax function
function filters() {
//if anyone is checked, return true to show all
var checkboxChecked = $('input[type=checkbox]:checked');
if (checkboxChecked.length <= 0) {
$('tr').show();
return true;
}
$('tr').not('.first').hide();
//else, find the name checked and verify with the name passed as parameter
checkboxChecked.each(function() {
var dimension1 = $(this).attr('rel');
var value = $(this).val();
$('td.' + dimension1 + '[rel="' + value + '"]').parent('tr').show();
});
}
//Multiplication of the cells function
function multInputs() {
var mult = 0;
$("tr").each(function() {
var $val1 = $('.metric1', this).val();
var $val2 = $('.metric2', this).text();
var $total = ($val1 * 1) * $val2 - $val1;
$('.multTotal', this).text($total.toPrecision(3));
var $val3 = $('.multTotal', this).text();
var $total2 = $val3 / 100
$('.metric3-100', this).text($total2.toPrecision(3));
var $total3 = $val1 / 100
$('.metric1-100', this).text($total3.toPrecision(2));
mult += $total;
});
}
//The filter function for the MIN MAX values in the MAIN VALUE column
function minmax() {
filters();
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
return parseFloat(data[2]) >= parseFloat($('#counter-low').val() || data[2]) &&
parseFloat(data[2]) <= parseFloat($('#counter-high').val() || data[2]);
});
var table = $('table').DataTable();
$('#counter-low, #counter-high').on('keyup', table.draw);
}
function filtermin() {
var value = $('#filter').val();
$('tr').show();
$('tr td.odds').each(function() {
if ($(this).text() < value) {
$(this).parent().hide();
}
});
}
<head>
<meta charset="utf-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<title>json extract in datorama tables</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="teste.js"></script>
<link rel="stylesheet" href="css/main.css"/>
<style href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></style>
</head>
<body>
<h1>discrepancy checker after extracting data in JSON</h1>
<hr/>
<div class="row">
<div class="col-sm-4 filter-columns">
<div class="ac-custom ac-checkbox ac-cross" autocomplete="off">
<h2>Dimension1</h2>
<ul>
<li><input rel="name" type="checkbox" value="Debra" id="cb1"><label for="cb1">Debra</label></li>
<li><input rel="name" type="checkbox" value="Julie" id="cb2"><label for="cb2">Julie</label></li>
<li><input rel="name" type="checkbox" value="Norma" id="cb3"><label for="cb3">Norma</label></li>
<li><input rel="name" type="checkbox" value="Bobby" id="cb4"><label for="cb4">Bobby</label></li>
<li><input rel="name" type="checkbox" value="Henry" id="cb5"><label for="cb5">Henry</label></li>
</ul>
</div>
</div>
<div class="col-sm-4 filter-columns-alt">
<div class="ac-custom ac-checkbox ac-cross" autocomplete="off">
<h2>MIN MAX</h2>
Min:<input id="counter-low" class="counter" type="text" />
Max:<input id="counter-high" class="counter" type="text" />
</div>
</div>
<div class="col-sm-4 filter-columns-alt">
<input type='text' id='filter' /> <button id='btnFilter'>Go</button>
</div>
</div>
<div id="body">
<table>
<thead>
<tr id="ProductID" class="first">
<th>NAME</th>
<th>INPUT</th>
<th>MAIN VALUE</th>
<th>DIFF</th>
<th>DIFF /100</th>
<th>MV /100</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
这篇关于使用查询（HTML表）添加数据从JSON网址添加数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
