时间戳

首页 > 解决方案 > Datatable 和 J 查询表搜索 - 为搜索中的数据创建对应的图表

javascript - Datatable 和 J 查询表搜索 - 为搜索中的数据创建对应的图表

问题描述

我正在创建一个网页，让我们可以搜索获得护理补助金的机会。我有数据表和 jquery 部分，但我想有一些视觉效果来伴随我的结果。在我的代码中，我有 2 个授权；1 弗吉尼亚州，1 杜克大学。我想要一个单独容器中的饼图，显示 VA 50% 和 Duke 50%。同样，如果我搜索“SDR”，就会出现一个 VA 赠款，我希望它显示 100% 的 VA 赠款。像 Bootstrap 或 Google Charts 这样的事情可能吗？如果是这样，并且您愿意帮助我编写代码，我将不胜感激。

````<head>

````<title>My access grant search title</title>

````<link ````href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTable````s.min.css" rel="stylesheet" />
````<link rel="stylesheet" ````href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
````<script ````src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
````</script>
````<script ````src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
````</script>
````<script ````src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.````min.js"></script>

````<script>$(document).ready(function() {
````  $('#example').DataTable({
````    responsive: {
````      details: {
````        type: 'column',
````        target: 5
````      }
````    },
````    columnDefs: [{
````      className: 'btn-info',
````      orderable: false,
````      targets: 5
````    }],
````  });
````});</script>

````<table id="example" class="display">
````  <thead>
````    <tr>
````      <th class="all">Project Name</th>
````      <th class="all">Project Number</th>
````      <th class="all">PI(s)</th>
````      <th class="all">End Date</th>
````      <th class="all">Organization</th>
````      <th class="all">Abstract</th>
````      <th class="none"></th>
````    </tr>
````  </thead>
````  <tbody>
````      <tr>

````      <td>Geographic Access to VHA Rehabilitation Services for OEF/OIF ````Veterans</td>
````      <td>DHI 06-010</td>
````      <td>Cowper Ripley, Diane</td>
````      <td>2007-09-30</td>
````      <td>VA</td>
````    <td>
````    <button type=""button"" class=""btn btn-info"" data- ````toggle=""collapse"" data-target=""#example"">Expand</button>
````    </td>

````     <td>(1) To identify a cohort of Operation Enduring Freedom ````(OEF)/Operation Iraqi Freedom (OIF) combat veterans who accessed Veterans ````Health Administration (VHA) facilities for conditions and injuries ````sustained while on active duty.</td></tr>
````<tr>

````      <td>A Role of Multilevel Healthcare Access Dimensions in Ovarian ````Cancer Disparities</td>
````      <td>R37CA233777</td>
````      <td>AKINYEMIJU, TOMI F;</td>
````      <td>2020-04-30</td>
````      <td>DUKE UNIVERSITY</td>
````    <td>
````    <button type=""button"" class=""btn btn-info"" data- ````toggle=""collapse"" data-target=""#example"">Expand</button>
````    </td>

````      <td>*No changes from original application* Narrative Ovarian cancer ````(OC) survival has improved over the past several decades as new, frontline ````treatment strategies have been developed.</td></tr>

````  </tbody>
````</table>

标签： javascriptjqueryhtmlcssdatatable

解决方案

推荐阅读