Заранее благодарим вас за вашу помощь.
У меня есть таблица данных, отвечающая за мобильное представление, и мне нужно получить данные строки.
Когда таблица находится в мобильном представлении с кнопками свертывания / развертывания, я могу получить данные строки, используя следующий код:
$("#myTable").on('click','.btn-action',function(){
var table = $('#myTable').DataTable();
var data = table.row(this).data();
alert(data); // returning array of row data
});
Но когда моя таблица находится в стандартном режиме, для P C просмотрите код выше, возвращающий: undefined.
Как я могу сделать 1 функцию, которая всегда возвращает данные строки, независимо от представления таблицы, мобильного или нет.
Заранее большое спасибо
Весь код страницы ниже:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>JPT parking</title>
<!-- BOOTSTRAP JQUERY -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!--Datatables CSS-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.bootstrap4.min.css">
<style type="text/css" class="init">
</style>
<style>
.modalInput{
min-width: 200px ;
text-transform:uppercase;
}
.tblRow {
text-transform:uppercase
}
.hdn{
display: none;
}
*{padding:0;margin:0;}
.svg {
width:40px;
height:40px;
}
.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#007BFF;
color:#FFF;
border-radius:50px;
text-align:center;
box-shadow: 2px 2px 3px #999;
padding-left: 10px;
padding-top: 10px;
}
.my-float{
}
</style>
<!--Datatables JQUERY-->
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
var table = $('#myTable').DataTable( {
bLengthChange: false,
searching: false,
responsive: true,
fixedHeader: {
headerOffset: $('#mainNav').outerHeight()
}
} );
$("#myTable").on('click','.btn-action',function(){
var table = $('#myTable').DataTable();
var data = table.row(this).data();
console.log(data);
});
///
} );
</script>
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<!-- <a class="navbar-brand js-scroll-trigger" href="#page-top">JPT Parking</a> -->
<input type="text" id="searchbox" placeholder="Search">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/arrived">On Parking
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/depart">Departed</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/all">All</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/admin">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- TABLE -->
<div class="container-sm container-table" >
<table id="myTable" class="table table-striped table-bordered table-hover " style="width:100%; padding-top: 100px;">
<thead class="thead-dark">
<tr>
<th data-priority="0" style="padding-right:3%;">Trailer</th>
<th data-priority="4" style="padding-right:3%;">Truck</th>
<th data-priority="5" style="padding-right:3%;">Name</th>
<th data-priority="6" style="padding-right:3%;">Lastname</th>
<th data-priority="3" style="padding-right:3%;">Date</th>
<th data-priority="1" style="padding-right:3%;">Dep</th>
<th data-priority="2" style="padding-right:3%;">Status</th>
<th data-priority="7" style="padding-right:3%;" >Oper</th>
<th data-priority="8" style="padding-right:3%;">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>aaaaa</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>Edinburgh</td>
<td>iglac</td>
<td><button type="button" class="btn btn-primary btn-action">Action</button></td>
</tr>
<tr>
<td>2</td>
<td>bbbbb</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>Edinburgh</td>
<td>iglac</td>
<td><button type="button" class="btn btn-primary btn-action">Action</button></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<div class="float btn btn-primary btn-circle btn-xl" onclick="$('#trlModalAdd').modal('show')">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-plus-circle svg my-float" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
<path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
</svg>
</div>
</div>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © Boris <br>boshl@dfds.com</p>
</div>
<!-- /.container -->
</footer>
</div>
<div class="float btn btn-primary btn-circle btn-xl" onclick="$('#trlModalAdd').modal('show')">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-plus-circle svg my-float" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 3.5a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5H4a.5.5 0 0 1 0-1h3.5V4a.5.5 0 0 1 .5-.5z"/>
<path fill-rule="evenodd" d="M7.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0V8z"/>
<path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
</svg>
</div>
<!-- Modal Add Trailer -->
<div class="modal fade" id="trlModalAdd" tabindex="-1" role="dialog" aria-labelledby="trlModalLabelAdd" aria-hidden="true" data-backdrop="false" >
<div class="modal-dialog" role="document" id="modalAdd">
<div class="modal-content" >
<div class="modal-header">
<h5 class="modal-title" id="trlModalLabelAdd">New trailer arrival</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form" id="addform" method="post" action="/trl/add" >
<div class="form-group row">
<label for="trailer" class="col-sm-3 col-form-label" >Trailer</label>
<div class="col-sm-4">
<input pattern="[A-Za-z0-9]+" id="trailer" class="form-control modalInput" name="inTrl" type="text" placeholder="Trailer" required >
</div>
</div>
<div class="form-group row">
<label for="truck" class="col-sm-3 col-form-label">Truck</label>
<div class="col-sm-4">
<input pattern="[A-Za-z0-9]+" style="text-transform:uppercase" id="truck" class="form-control modalInput" name="inTruck" type="text" placeholder="Truck" required >
</div>
</div>
<div class="form-group row">
<label for="name" class="col-sm-3 col-form-label">Name</label>
<div class="col-sm-4">
<input pattern="[A-Za-z0-9]+" style="text-transform:uppercase" id="name" class="form-control modalInput" name="inName" type="text" placeholder="Name" required>
</div>
</div>
<div class="form-group row">
<label for="lastname" class="col-sm-3 col-form-label">Lastname</label>
<div class="col-sm-4">
<input pattern="[A-Za-z0-9]+" style="text-transform:uppercase" id="lastname" class="form-control modalInput" name="inLname" type="text" placeholder="Lastname" required >
</div>
</div>
<div class="form-group row">
<label for="indatepicker" class="col-sm-3 col-form-label">Date</label>
<div class="col-sm-4">
<div id="indatepicker" class="input-group date modalInput" data-date-format="dd-mm-yyyy">
<input class="form-control date readonly modalInput" name="inDate" type="text" placeholder="Date" required readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<div class="form-group row">
<label for="department" class="col-sm-3 col-form-label">Department</label>
<div class="col-sm-4">
<select id="department" class="form-control modalInput" name="dep" required >
<option value="" selected disabled>Select department</option>
<option>SE-Baltic</option>
<option>UK-Baltic</option>
<option>Concrete</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="status" class="col-sm-3 col-form-label">Status</label>
<div class="col-sm-4">
<select id="status" class="form-control modalInput" name="status" required >
<option value="" disabled selected>Select status</option>
<option>Empty</option>
<option>Loaded</option>
<option>Stack</option>
<option style="color:darkred;">Need repair</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary" >Save changes</button>
<br>
<br>
<div class="modal-footer">
<div class="form-group row">
<div class="col-sm-2"></div>
<div class="form-check">
<input pattern="[A-Za-z0-9]+" class="form-check-input" type="checkbox" name="email" value="yes" checked hidden>
<input pattern="[A-Za-z0-9]+" class="form-check-input" type="checkbox" name="email" id="email" value="no">
<label class="form-check-label" for="email">
Don't send e-mail
</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>