Sure, here's a basic example of how you can implement jQuery, AJAX pagination with search functionality in a modal with a large dataset displayed in a table:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Pagination with Search</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<input type="text" id="searchInput" placeholder="Search by Game ID">
<table id="data-table">
<!-- Table rows will be populated by AJAX -->
</table>
<div id="pagination">
<!-- Pagination links will be populated by AJAX -->
</div>
</div>
</div>
<script>
$(document).ready(function() {
// Pagination and search on modal open
$('#myModal').on('show.bs.modal', function() {
loadData(1, '');
});
// Search on keyup
$('#searchInput').keyup(function() {
loadData(1, $(this).val());
});
// Pagination click
$(document).on('click', '#pagination a', function(e) {
e.preventDefault();
var page = $(this).attr('data-page');
var keyword = $('#searchInput').val();
loadData(page, keyword);
});
// Load data via AJAX
function loadData(page, keyword) {
$.ajax({
url: 'fetch_data.php', // Change to your server-side script to fetch data
method: 'POST',
data: {page: page, keyword: keyword},
dataType: 'json',
success: function(response) {
$('#data-table').html(response.table);
$('#pagination').html(response.pagination);
},
error: function(xhr, status, error) {
console.error(xhr.responseText);
}
});
}
});
</script>
</body>
</html>
```
In this example:
- The modal is opened when needed.
- Data is loaded via AJAX when the modal is opened, when pagination links are clicked, or when the search input changes.
- The data is fetched from the server-side script (`fetch_data.php`), which should return JSON containing the table HTML and pagination links based on the requested page and search keyword.
You'll need to implement the server-side script (`fetch_data.php`) to fetch the data based on the provided page number and search keyword and return it in the expected JSON format.
To implement dynamic MySQL pagination and search functionality in your server-side script (e.g., `fetch_data.php`), you can use SQL queries with LIMIT and OFFSET for pagination and WHERE clause for search filtering. Here's a basic example using PHP and MySQL:
```php
<?php
// Database connection
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Pagination and search parameters
$page = $_POST['page'];
$limit = 100; // Number of records per page
$offset = ($page - 1) * $limit;
$keyword = $_POST['keyword'];
// SQL query for fetching data with pagination and search
$sql = "SELECT * FROM your_table";
$countSql = "SELECT COUNT(*) AS count FROM your_table";
// Add search condition if keyword is provided
if (!empty($keyword)) {
$sql .= " WHERE game_id LIKE '%$keyword%'";
$countSql .= " WHERE game_id LIKE '%$keyword%'";
}
// Execute count query to determine total number of records
$countResult = $conn->query($countSql);
$countRow = $countResult->fetch_assoc();
$totalRecords = $countRow['count'];
// Execute main query with pagination
$sql .= " LIMIT $limit OFFSET $offset";
$result = $conn->query($sql);
// Construct HTML table rows
$table = '';
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
// Assuming your table has columns 'game_id', 'column1', 'column2', etc.
$table .= "<tr>";
$table .= "<td>" . $row['game_id'] . "</td>";
// Add other columns as needed
$table .= "</tr>";
}
}
// Construct pagination links
$pagination = '';
$pages = ceil($totalRecords / $limit);
for ($i = 1; $i <= $pages; $i++) {
$pagination .= "<a href='#' data-page='$i'>$i</a>";
}
// Return JSON response
$response = array(
'table' => $table,
'pagination' => $pagination
);
echo json_encode($response);
// Close database connection
$conn->close();
?>
```
This PHP script:
- Establishes a connection to the MySQL database.
- Receives the page number and search keyword via POST request.
- Constructs SQL queries dynamically based on the provided parameters.
- Executes the queries to fetch the required data and the total count of records.
- Constructs HTML table rows and pagination links based on the fetched data and total record count.
- Returns a JSON response containing the HTML table and pagination links.
Replace `'your_table'` with your actual table name and adjust the column names accordingly. Also, make sure to handle errors and sanitize input to prevent SQL injection attacks.
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me