引导Excel表格过滤器在HTML表格中不起作用

时间：2018-09-11 17:23:52

标签： javascript jquery html-table datatables bootstrap-table

当前，我正在开发仪表板，该仪表板允许用户过滤数据并向服务器中存在的CSV文件添加注释并添加注释。为此，我使用了不同类型的过滤器，并尝试将bootstrap excel表过滤器插件和jquery数据表插件集成为日期过滤器。问题是，当我从引导过滤器下拉菜单中应用过滤器时，它会过滤数据并出现异常，如下所示。

excel-bootstrap-table-filter-bundle.js:274 Uncaught TypeError: Cannot read property 'innerText' of undefined
at FilterCollection.updateRowVisibility (excel-bootstrap-table-filter-bundle.js:274)
at HTMLInputElement.<anonymous> (excel-bootstrap-table-filter-bundle.js:214)
at HTMLInputElement.dispatch (jquery-2.0.3.min.js:5)
at HTMLInputElement.y.handle (jquery-2.0.3.min.js:5)

When selecting date filter getting another exception,
jquery.dataTables.js:1591 Uncaught TypeError: Cannot read property 'oFeatures' of null
at _fnReDraw (jquery.dataTables.js:1591)
at init.DataTable.fnDraw (jquery.dataTables.js:5558)
at HTMLInputElement.onSelect (2_org.html:232)
at Datepicker._selectDate (jquery-ui.js:4029)
at Datepicker._selectDay (jquery-ui.js:4005)
at HTMLTableCellElement.selectDay (jquery-ui.js:4593)
at HTMLTableCellElement.dispatch (jquery-2.0.3.min.js:5)
at HTMLTableCellElement.y.handle (jquery-2.0.3.min.js:5)

我的代码如下：它是我新来的肮脏代码

    <html>
<head>
<meta charset="utf-8">
<title>OCR Report</title>
</head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td,th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

.optionsDiv {
padding-bottom:10px;
font-weight:bold;
}

.searchclass{
width: 235px;
height: 29px;
maxlength: 32;
position: absolute;
left: 580px;
top: 70px;
}

.mybutton{
position: absolute;
left: 15px;
}

.myselect{
position: absolute;
left: 10px;
top:  15px;     
}

</style>
<body>
<select id="selectField" onchange="myFunction()">
<option value="All" selected>All</option>
<option value="SUCCESS">Detected</option>
<option value="FAILED">Not Detected</option>
</select>

<p id="date_filter">
<span id="date-label-from" class="date-label">From: </span>
<input class="date_range_filter date" type="text" id="datepicker_from" />
<span id="date-label-to" class="date-label">To: </span>
<input class="date_range_filter date" type="text" id="datepicker_to" />
</p>

<button onclick="filterapp();" class="mybutton">Apply Filter</button>
<br />
<input type="text" id="mysearch" class="searchclass" placeholder="Search any data in table..."></input>     
<br /> 
<!--<button onclick="Loadtable();">View Report</button> -->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>-->

<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables_themeroller.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table_jui.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_page.css" rel="stylesheet" data-semver="1.9.4" data-require="datatables@*" />
<link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui@*" data-semver="1.10.0" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js" data-semver="1.9.4" data-require="datatables@*"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- Load the plugin bundle. -->
<script src="http://localhost:8085/excel-bootstrap-table-filter-bundle.js"></script>
<link rel="stylesheet" href="http://localhost:8085/excel-bootstrap-table-filter-style.css" />


<script type="text/javascript"></script>
<script>

function arrayToTable(tableData) {
var table = $('<table id = "ocrtable"> </table>');
i =1;
$(tableData).each(function (i, rowData) {
var row = $('<tr></tr>');
$(rowData).each(function (j, cellData) {
//console.log( 'j['+j+']:'+ cellData+cellData.length);
if (cellData.length != 0 )
{
if (i==0)
{
row.append($('<th>'+cellData+'</th>'));
}
else
{
row.append($('<td>'+cellData+'</td>'));
}
}   
});
table.append(row);
});
return table;
}

/*  function Loadtable(){
//var x = location.hostname;
var myhost = "http://localhost:8085/ocrsamples_s.csv"; 
alert(myhost);
$.ajax({
type: "GET",
url: myhost,
headers: {
'Access-Control-Allow-Origin': '*'
},
success: function (data) {
$('body').append(arrayToTable(Papa.parse(data).data));
}
});
}*/

var myhost = "http://localhost:8085/ocrsamples_s.csv"; 
alert(myhost);
$.ajax({
type: "GET",
url: myhost,
headers: {
'Access-Control-Allow-Origin': '*'
},
success: function (data) {
$('body').append(arrayToTable(Papa.parse(data).data));
}
});

function myFunction() {
// Declare variables 
var input;
input = document.getElementById("selectField");
alert(input.value);
if ( input.value == "SUCCESS" || input.value == "FAILED")
{
filtertable(input.value,6);
}
else
{
showall();
}
}

function filtertable (filter,index){

var table, tr, td, i;

// Loop through all table rows, and hide those who don't match the search query
table = document.getElementById("ocrtable");
tr = table.getElementsByTagName("tr");

for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[index];
if (td) {
//alert("jay jay")
if (td.innerHTML.indexOf(filter) > -1) {
//alert("jay inside");
tr[i].style.display = "";
} else {
// alert("jay none")
tr[i].style.display = "none";
}
} 
}
}

function showall (  ){

var table, tr, td, i;

// Loop through all table rows, and hide those who don't match the search query
table = document.getElementById("ocrtable");
tr = table.getElementsByTagName("tr");

for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
alert("jay inside");
tr[i].style.display = "";
} 
} 
}

$(function() {
console.log("jay123");
alert("jay1234");
var oTable = $('#ocrtable').DataTable({
"initComplete": function(settings, json) {
console.log( 'DataTables has finished its initialisation.' );
},
"oLanguage": {
"sSearch": "Filter Data"
},
"iDisplayLength": -1,
"sPaginationType": "full_numbers",

});

$("#datepicker_from").datepicker({
dateFormat: 'mm-dd-yy',
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: false,
"onSelect": function(date) {
minDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function() {
minDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});

$("#datepicker_to").datepicker({
dateFormat: 'mm-dd-yy',
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: false,
"onSelect": function(date) {
maxDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function() {
maxDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});

});

// Date range filter
minDateFilter = "";
maxDateFilter = "";

$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex) {
if (typeof aData._date == 'undefined') {
aData._date = new Date(aData[3]).getTime();
}

if (minDateFilter && !isNaN(minDateFilter)) {
//console.log("jay min:" + aData._date  + "min date:" + minDateFilter);
if (aData._date < minDateFilter) {
return false;
}
}

if (maxDateFilter && !isNaN(maxDateFilter)) {
//                  console.log("jay max:" + aData._date + "max date:" + maxDateFilter);
if (aData._date > maxDateFilter) {
return false;
}
}

return true;
}
);

$(document).ready(function(){
$("#mysearch").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#ocrtable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});

function filterapp( ){  
alert("jay");
$(document).ready(function () {
// Apply the plugin 
$('#ocrtable').excelTableFilter();
});
}   

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
console.log('Taking a break...');
await sleep(5000);
console.log('Two seconds later');
}


</script>
</body> 
</html>

任何专家都可以就此或任何其他新想法指导我吗？感谢您的宝贵时间。抱歉，代码笨拙。

0 个答案:

没有答案
相关问题
最新问题