根据开始日期和结束日期筛选 JSON
Filter JSON based on startdate and enddate
我的 JSON 看起来像这样:
[
{
"date": "2015-06-19",
"operator": "ums.dam",
"type": "General Query",
"subType": "Sales",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-17",
"operator": "ums.rdl",
"type": "General Query",
"subType": "Media",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-17",
"operator": "ums.dam",
"type": "General Query",
"subType": "Other",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-16",
"operator": "ums.djf",
"type": "General Query",
"subType": "Press",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-15",
"operator": "ums.djf",
"type": "Troubleshooting",
"subType": "Service",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-15",
"operator": "ums.djf",
"type": "General Query",
"subType": "Sales",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-15",
"operator": "ums.djf",
"type": "General Query",
"subType": "Other",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-04",
"operator": "ums.jxh",
"type": "Account Maintenance",
"subType": "Add/Remove Feature",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-04",
"operator": "ums.djf",
"type": "Account Maintenance",
"subType": "Add/Remove Feature",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-04",
"operator": "ums.djf",
"type": "Troubleshooting",
"subType": "Service",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-04",
"operator": "ums.djf",
"type": "General Query",
"subType": "Other",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-01",
"operator": "ums.djf",
"type": "General Query",
"subType": "Manual Activation",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-01",
"operator": "ums.djf",
"type": "General Query",
"subType": "Manual Activation",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
}
]
JSON 来自外部来源,在生产中将是动态的,但所有来源都将具有相同的结构。
用户将有三个输入:
- 选择 JSON 源的第一个输入(出于演示目的删除)
- 第二个输入选择开始日期开始返回 JSON 数据(例如 2015-06-01)
- 第三个输入选择结束日期以结束返回 JSON 数据(例如 2015-06-19)
这是表格 HTML:
<div class="row">
<form id="search" role="form" style="border:0">
<div class="col-md-3">
<ul class="nav nav-stacked">
<li><strong>From Date</strong></li>
<li>
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="dateFrom" />
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-stacked">
<li><strong>To Date</strong></li>
<li>
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="dateTo" />
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-stacked">
<li> </li>
<li>
<button class="btn btn-primary" type="button" id="getJsonSrc">Search</button>
</li>
</ul>
</div>
</form>
</div>
<!-- Row -->
这里是 javascript:
$("#getJsonSrc").click(function() {
var $table = $("#dataTable"),
$startDate = $("#dateFrom").val(),
$endDate = $("#dateTo").val(),
$jsonSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json"; //for demo only - in production this will come from 1st input val()
/* This is the code that is not working */
$jsonSrc = filter(function(i, fromDate, toDate) {
return ($jsonSrc.date < $startDate && $jsonSrc.date > $endDate)
});
$table.bootstrapTable("destroy");
$table.bootstrapTable();
$table.bootstrapTable("refresh", {
url: $jsonSrc
});
});
基本上我想要的是当用户点击搜索页面时获得 JSON 来源 URL,但只有 returns 输入日期(包括输入日期)之间的数据。 JSON然后输出成bootstrap数据table.
我通常会提供一个 jsFiddle 示例,但是我无法让 fiddle 读取外部 JSON 文件,所以希望代码笔示例没问题 :)
http://codepen.io/lordtubington/pen/GJOVpy
注意:我知道 bootstrap table https://github.com/lukaskral/bootstrap-table-filter 有一个过滤器扩展,但是这个过滤器扩展在获取数据后起作用。我的用户将请求包含数千条记录的文件,我不能让他们获取所有记录然后应用日期过滤器:)
我通过这个修复了代码:
http://codepen.io/anon/pen/pJdMxv
我所做的更改:我通过 jquery 加载了 json,为开始日期、结束日期和 obj 日期创建了日期对象,然后创建了一个新数组并推送了所有匹配的日期在数组里面。
$("#getJsonSrc").click(function() {
var $table = $("#dataTable"),
$startDate = new Date($("#dateFrom").val()),
$endDate = new Date($("#dateTo").val()),
$jsonSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json";
$.getJSON($jsonSrc).success(function(data) {
my_array = new Array();
for (var i = 0; i < data.length; i++) {
var this_date = new Date(data[i].date);
if ((this_date >= $startDate) && (this_date <= $endDate)) {
my_array.push(data[i]);
}
}
console.log(my_array);
$table.bootstrapTable("destroy");
$table.bootstrapTable();
$table.bootstrapTable("refresh", {
url: my_array
});
});
});
原来我不需要 JSON.stringify(my_array)
,我需要使用 load
选项而不是 data
。以下是工作代码:
$("#getJsonSrc").click(function() {
$("#dataTable thead").show();
var $table = $("#dataTable"),
$startDate = new Date($("#dateFrom").val()),
$endDate = new Date($("#dateTo").val()),
$jsonSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json";
var my_array;
$.getJSON($jsonSrc).success(function(data) {
my_array = [];
for (var i = 0; i < data.length; i++) {
var this_date = new Date(data[i].date);
if ((this_date >= $startDate) && (this_date <= $endDate)) {
my_array.push(data[i]);
}
}
$table.bootstrapTable("load", my_array);
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div class="container">
<div class="row">
<form id="search" role="form" style="border:0">
<div class="col-md-3">
<ul class="nav nav-stacked">
<li><strong>From Date</strong>
</li>
<li>
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="dateFrom" value="2015-06-17" />
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-stacked">
<li><strong>To Date</strong>
</li>
<li>
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="dateTo" value="2015-06-19" />
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-stacked">
<li> </li>
<li>
<button class="btn btn-primary" type="button" id="getJsonSrc">Search</button>
</li>
</ul>
</div>
</form>
</div>
<!-- Row -->
<div class="row">
<div class="col-md-12">
<table id="dataTable" data-toggle="table" data-pagination="true" data-page-size="5" data-page-list="5, 10, All" data-search="true" data-search-align="left" data-striped="true" data-show-refresh="true" data-sort-name="date" data-sort-order="desc">
<thead>
<tr>
<th class="col-xs-1" data-field="date">Date</th>
<th class="col-xs-1" data-field="operator">Operator</th>
<th class="col-xs-2" data-field="type">Type</th>
<th class="col-xs-2" data-field="subType">Sub Type</th>
<th class="col-xs-5" data-field="message">Message</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
我的 JSON 看起来像这样:
[
{
"date": "2015-06-19",
"operator": "ums.dam",
"type": "General Query",
"subType": "Sales",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-17",
"operator": "ums.rdl",
"type": "General Query",
"subType": "Media",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-17",
"operator": "ums.dam",
"type": "General Query",
"subType": "Other",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-16",
"operator": "ums.djf",
"type": "General Query",
"subType": "Press",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-15",
"operator": "ums.djf",
"type": "Troubleshooting",
"subType": "Service",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-15",
"operator": "ums.djf",
"type": "General Query",
"subType": "Sales",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-15",
"operator": "ums.djf",
"type": "General Query",
"subType": "Other",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-04",
"operator": "ums.jxh",
"type": "Account Maintenance",
"subType": "Add/Remove Feature",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-04",
"operator": "ums.djf",
"type": "Account Maintenance",
"subType": "Add/Remove Feature",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-04",
"operator": "ums.djf",
"type": "Troubleshooting",
"subType": "Service",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-04",
"operator": "ums.djf",
"type": "General Query",
"subType": "Other",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-01",
"operator": "ums.djf",
"type": "General Query",
"subType": "Manual Activation",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
},
{
"date": "2015-06-01",
"operator": "ums.djf",
"type": "General Query",
"subType": "Manual Activation",
"message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tempus odio purus, sit amet semper leo congue eu. Aliquam erat."
}
]
JSON 来自外部来源,在生产中将是动态的,但所有来源都将具有相同的结构。
用户将有三个输入:
- 选择 JSON 源的第一个输入(出于演示目的删除)
- 第二个输入选择开始日期开始返回 JSON 数据(例如 2015-06-01)
- 第三个输入选择结束日期以结束返回 JSON 数据(例如 2015-06-19)
这是表格 HTML:
<div class="row">
<form id="search" role="form" style="border:0">
<div class="col-md-3">
<ul class="nav nav-stacked">
<li><strong>From Date</strong></li>
<li>
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="dateFrom" />
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-stacked">
<li><strong>To Date</strong></li>
<li>
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="dateTo" />
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-stacked">
<li> </li>
<li>
<button class="btn btn-primary" type="button" id="getJsonSrc">Search</button>
</li>
</ul>
</div>
</form>
</div>
<!-- Row -->
这里是 javascript:
$("#getJsonSrc").click(function() {
var $table = $("#dataTable"),
$startDate = $("#dateFrom").val(),
$endDate = $("#dateTo").val(),
$jsonSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json"; //for demo only - in production this will come from 1st input val()
/* This is the code that is not working */
$jsonSrc = filter(function(i, fromDate, toDate) {
return ($jsonSrc.date < $startDate && $jsonSrc.date > $endDate)
});
$table.bootstrapTable("destroy");
$table.bootstrapTable();
$table.bootstrapTable("refresh", {
url: $jsonSrc
});
});
基本上我想要的是当用户点击搜索页面时获得 JSON 来源 URL,但只有 returns 输入日期(包括输入日期)之间的数据。 JSON然后输出成bootstrap数据table.
我通常会提供一个 jsFiddle 示例,但是我无法让 fiddle 读取外部 JSON 文件,所以希望代码笔示例没问题 :)
http://codepen.io/lordtubington/pen/GJOVpy
注意:我知道 bootstrap table https://github.com/lukaskral/bootstrap-table-filter 有一个过滤器扩展,但是这个过滤器扩展在获取数据后起作用。我的用户将请求包含数千条记录的文件,我不能让他们获取所有记录然后应用日期过滤器:)
我通过这个修复了代码:
http://codepen.io/anon/pen/pJdMxv
我所做的更改:我通过 jquery 加载了 json,为开始日期、结束日期和 obj 日期创建了日期对象,然后创建了一个新数组并推送了所有匹配的日期在数组里面。
$("#getJsonSrc").click(function() {
var $table = $("#dataTable"),
$startDate = new Date($("#dateFrom").val()),
$endDate = new Date($("#dateTo").val()),
$jsonSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json";
$.getJSON($jsonSrc).success(function(data) {
my_array = new Array();
for (var i = 0; i < data.length; i++) {
var this_date = new Date(data[i].date);
if ((this_date >= $startDate) && (this_date <= $endDate)) {
my_array.push(data[i]);
}
}
console.log(my_array);
$table.bootstrapTable("destroy");
$table.bootstrapTable();
$table.bootstrapTable("refresh", {
url: my_array
});
});
});
原来我不需要 JSON.stringify(my_array)
,我需要使用 load
选项而不是 data
。以下是工作代码:
$("#getJsonSrc").click(function() {
$("#dataTable thead").show();
var $table = $("#dataTable"),
$startDate = new Date($("#dateFrom").val()),
$endDate = new Date($("#dateTo").val()),
$jsonSrc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/77979/demo.json";
var my_array;
$.getJSON($jsonSrc).success(function(data) {
my_array = [];
for (var i = 0; i < data.length; i++) {
var this_date = new Date(data[i].date);
if ((this_date >= $startDate) && (this_date <= $endDate)) {
my_array.push(data[i]);
}
}
$table.bootstrapTable("load", my_array);
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div class="container">
<div class="row">
<form id="search" role="form" style="border:0">
<div class="col-md-3">
<ul class="nav nav-stacked">
<li><strong>From Date</strong>
</li>
<li>
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="dateFrom" value="2015-06-17" />
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-stacked">
<li><strong>To Date</strong>
</li>
<li>
<input type="text" class="form-control" placeholder="yyyy-mm-dd" id="dateTo" value="2015-06-19" />
</li>
</ul>
</div>
<div class="col-md-3">
<ul class="nav nav-stacked">
<li> </li>
<li>
<button class="btn btn-primary" type="button" id="getJsonSrc">Search</button>
</li>
</ul>
</div>
</form>
</div>
<!-- Row -->
<div class="row">
<div class="col-md-12">
<table id="dataTable" data-toggle="table" data-pagination="true" data-page-size="5" data-page-list="5, 10, All" data-search="true" data-search-align="left" data-striped="true" data-show-refresh="true" data-sort-name="date" data-sort-order="desc">
<thead>
<tr>
<th class="col-xs-1" data-field="date">Date</th>
<th class="col-xs-1" data-field="operator">Operator</th>
<th class="col-xs-2" data-field="type">Type</th>
<th class="col-xs-2" data-field="subType">Sub Type</th>
<th class="col-xs-5" data-field="message">Message</th>
</tr>
</thead>
</table>
</div>
</div>
</div>