I'm trying to combine tow jQuery-Tabledit and Multi filter (Multi-Filterable Table with JS)
till 3rd column, the code is working fine but after that jQuery-Tabledit replace search box with an input field.
how can I prevent this
I found a few answers for Two jquery tools interfere with each other but they are completely different from the issue I'm facing
I also tried loading the script one by one but I Cant load the function one by one as both scripts work actively on a page
Posting full code because i have no idea what part of the code creating the issue
<?php session_start(); ?>
<?php
if(isset($_SESSION['valids'])) {
?>
<?php
} else {
header("Location: http://XXX.XX.XX.XXX/superuser/login.php");
}
?>
<?php
include('db-connect.php');
$sql = "SELECT TeamName FROM superuser WHERE id = '".$_SESSION['id']."'";
$valueToSearch3 = mysqli_query($con, $sql) or die("error to fetch employees data");
while ($row222 = $valueToSearch3->fetch_assoc())
if(isset($_POST['search']))
{
$valueToSearch = $_POST['valueToSearch'];
$sql = "SELECT * FROM `attendance` WHERE date = '".$valueToSearch."' and TeamName LIKE '".$row222['TeamName']."'";
$row1 = mysqli_query($con, $sql) or die("error to fetch employees data");
}
else {
$sql = "SELECT * FROM `attendance` WHERE date = CURDATE() and TeamName LIKE '%".$row222['TeamName']."%'";
$row1 = mysqli_query($con, $sql) or die("error to fetch employees data");
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="jquery.tabledit.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
$('#example1').Tabledit({
url: 'logic-edit-delete.php',
editButton: false,
deleteButton: false,
hideIdentifier: true,
columns: {
identifier: [0, 'id'],
editable: [[4, 'Status', '{"-": "Select","P": "Present", "PL": "Planed Leave", "UPL": "UnPlaned Leave", "WO": "Week Off", "COff": "Comp Off", "PH": "Public Holiday", "UPHD": "UnPlaned Half Day", "PHD": "Planed Half Day", "LWP": "Leave Without Pay"}'], [5, 'Leavetype', '{"-": "Select","Sick Leave": "Sick Leave", "Casual Leave": "Casual Leave", "Exigencies": "Exigencies"}']]
},
onDraw: function() {
console.log('onDraw()');
},
onSuccess: function(data, textStatus, jqXHR) {
console.log('onSuccess(data, textStatus, jqXHR)');
console.log(data);
console.log(textStatus);
console.log(jqXHR);
},
onFail: function(jqXHR, textStatus, errorThrown) {
console.log('onFail(jqXHR, textStatus, errorThrown)');
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
},
onAlways: function() {
console.log('onAlways()');
},
onAjax: function(action, serialize) {
console.log('onAjax(action, serialize)');
console.log(action);
console.log(serialize);
}
});
});
</script>
<style>
.table.user-select-none {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<div class="container" style="margin-top:10px;">
<div class="panel panel-default">
<div class="panel-heading">
<form action="indexFilter.php" method="post">
<button><a href="http://XXX.XX.XX.XXX/superuser/">Home</a></button> <button><a href="http://XXX.XX.XX.XXX/">Add a new </a></button> <button><a href="http://XXX.XX.XX.XXX/superuser/logout.php">Logout</a></button>
<b>Selact Date</b>
<input type="text" id="Datetos" name="valueToSearch" />
<script type="text/javascript">
$('#Datetos').datepicker({
dateFormat: 'yy-mm-dd'
});
</script>
<script type="text/javascript">
function filter(_id) {
var table = document.getElementById(_id);
//get all filters.
var getFilters = [table.querySelectorAll("input")[0].value.toLowerCase(),
table.querySelectorAll("input")[1].value.toLowerCase(),
table.querySelectorAll("input")[2].value.toLowerCase(),
table.querySelectorAll("input")[3].value.toLowerCase(),
table.querySelectorAll("input")[4].value.toLowerCase()]
for (var r = 2; r < table.rows.length; r++)
{
//strip tags
var el1 = table.rows[r].cells[0].innerHTML.replace(/<[^>]+>/g, "");
var el2 = table.rows[r].cells[1].innerHTML.replace(/<[^>]+>/g, "");
var el3 = table.rows[r].cells[2].innerHTML.replace(/<[^>]+>/g, "");
var el4 = table.rows[r].cells[3].innerHTML.replace(/<[^>]+>/g, "");
var el5 = table.rows[r].cells[4].innerHTML.replace(/<[^>]+>/g, "");
var search1 = el1.toLowerCase().indexOf(getFilters[0]);
var search2 = el2.toLowerCase().indexOf(getFilters[1]);
var search3 = el3.toLowerCase().indexOf(getFilters[2]);
var search4 = el4.toLowerCase().indexOf(getFilters[3]);
var search5 = el5.toLowerCase().indexOf(getFilters[4]);
//test all searches, if found or el = empty display
if ( (search1 >= 0 || el1 == "" ) && (search2 >= 0 || el2 == "" ) && (search3 >= 0 || el3 == "" ) && (search4 >= 0 || el4 == "" ) && (search5 >= 0 || el5 == "" )) {
table.rows[r].style.display = '';
} else {
table.rows[r].style.display = 'none';
}
}
}
</script>
<input type="submit" name="search" value="Filter"> <button><a href="http://XXX.XX.XX.XXX/superuser/Attendance/">Reload</a></button> </form>
</div>
<div class="panel-body">
<table class="table" id="example1" style="border:1px solide red">
<tr>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('example1')" type="text" size="3"></input></td>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('example1')" type="text" size="3"></input></td>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('example1')" type="text" size="3"></input></td>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('example1')" type="text" size="3"></input></td>
<td><input placeholder="search" name="filterinput3" onkeyup="filter('example1')" type="text" size="3"></input></td>
</tr>
<tr><th>ID</th><th>Date</th><th>EmpID</th><th>Name</th><th>Status</th><th>Leave Type</th><th>Shift</th><th>Team Name</th></tr>
<?php while($row = mysqli_fetch_assoc($row1)) {?>
<tr>
<td><?php echo $row['id'];?></td>
<td><?php echo $row['Date']; ?></td>
<td><?php echo $row['EmpID']; ?></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['Status']; ?></td>
<td><?php echo $row['Leavetype']; ?></td>
<td><?php echo $row['Shift']; ?></td>
<td><?php echo $row['TeamName']; ?></td>
</tr>
<?php } ?>
</table>
</div>
<script type="text/javascript">
$('table tr td:nth-child(5)').each(function () {
$(this).text() == 'P' && $(this).parent().find('td:nth-child(5)').css('background-color', '#bcfba3');
});
$('table tr td:nth-child(5)').each(function () {
$(this).text() == 'P' && $(this).parent().find('td:nth-child(3)').css('background-color', '#bcfba3');
});
</script>
</div>
</div>
</body>
</html>
