Евгения Дмитриевна Белоусова

Евгения Дмитриевна Белоусова

1659344880

Поиск диапазона дат в DataTable с помощью jQuery AJAX и PHP

DataTable поставляется с одним полем поиска, которое можно использовать для поиска по всем или определенным полям и отображения отфильтрованных записей.

Вы можете добавлять пользовательские элементы в соответствии с вашими требованиями и использовать их с DataTable.

В этом руководстве я покажу, как реализовать поиск по диапазону дат в DataTable с помощью jQuery AJAX и PHP. Я использую jQuery UI для добавления выбора даты.

1. Структура таблицы

Создайте employeeтаблицу, и я добавил несколько записей.

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(80) NOT NULL, 
  `salary` varchar(20) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL,
  `date_of_joining` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Для поиска по дате создал 'date_of_joining'поле dateтипа.

2. Конфигурация

Создайте config.phpдля подключения к базе данных.

Завершенный код

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. Загрузите и включите

  • Скачать Datatables отсюда и jQuery UI отсюда .
  • Включите  datatables.min.css, jquery-ui.min.css, библиотеку jQuery jquery-ui.min.js, и datatables.min.jsв <head>раздел.
  • Вы также можете использовать CDN.
<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

<!-- jQuery UI CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- jQuery UI JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

4. HTML

Для фильтра даты создайте два текстовых элемента. Добавлено class='datepicker'для инициализации datepicker. Кроме того, создайте элемент кнопки.

Создать <table id='empTable'>.

Завершенный код

<div >
   <!-- Date Filter -->
   <table>
     <tr>
       <td>
          <input type='text' readonly id='search_fromdate' class="datepicker" placeholder='From date'>
       </td>
       <td>
          <input type='text' readonly id='search_todate' class="datepicker" placeholder='To date'>
       </td>
       <td>
          <input type='button' id="btn_search" value="Search">
       </td>
     </tr>
   </table>

   <!-- Table -->
   <table id='empTable' class='display dataTable'>
     <thead>
       <tr>
         <th>Employee name</th>
         <th>Email</th>
         <th>Date of Joining</th>
         <th>Salary</th>
         <th>City</th>
       </tr>
     </thead>

   </table>
</div>

5. Скрипт

Инициализировать datepickerна class='datepicker'.

Инициализировать DataTable на #empTable. Установить параметры – 'processing': true, 'serverSide': true, 'serverMethod': 'post'. Установите URL-адрес AJAX в 'ajaxfile.php'.

С 'ajax' dataопцией фильтрации даты от и до даты путем добавления в dataобъект. Присвойте from_dateзначение в data.searchByFromdateи to_dateзначение в data.searchByTodate.

Параметр With 'columns'указывает имена ключей, которые необходимо прочитать из ответа AJAX.

На кнопке поиска нажмите вызов dataTable.draw(), чтобы перерисовать DataTable и передать значения фильтра.

Завершенный код

$(document).ready(function(){

   // Datapicker 
   $( ".datepicker" ).datepicker({
      "dateFormat": "yy-mm-dd",
      changeYear: true
   });

   // DataTable
   var dataTable = $('#empTable').DataTable({
     'processing': true,
     'serverSide': true,
     'serverMethod': 'post',
     'searching': true, // Set false to Remove default Search Control
     'ajax': {
       'url':'ajaxfile.php',
       'data': function(data){
          // Read values
          var from_date = $('#search_fromdate').val();
          var to_date = $('#search_todate').val();

          // Append to data
          data.searchByFromdate = from_date;
          data.searchByTodate = to_date;
       }
     },
     'columns': [
        { data: 'emp_name' },
        { data: 'email' },
        { data: 'date_of_joining' },
        { data: 'salary' },
        { data: 'city' },
     ]
  });

  // Search button
  $('#btn_search').click(function(){
     dataTable.draw();
  });

});

6. PHP

Создайте ajaxfile.phpфайл для обработки запросов AJAX.

Прочитайте значения DataTable POST и назначьте их переменным.

Кроме того, прочитайте переданные значения фильтра даты и назначьте in $searchByFromdateи $searchByTodate.

Если $searchValueне пусто, то подготавливает запрос фильтра поиска. Используйте $searchValueдля поиска по полям emp_name, email и city.

Если $searchByFromdateи $searchByTodateне пусто, подготовьте и объедините запрос фильтра поиска в файле $searchQuery. Используйте между, чтобы выбрать записи, date_of_joiningзначение поля которых находится между $searchByFromdateи $searchByTodate.

Подсчитайте количество записей с фильтром и без него из employeeтаблицы. Назначьте итоговые записи без фильтра $totalRecordsи с фильтром в $totalRecordwithFilter.

Извлеките записи из employeeтаблицы, где перейдите $searchQueryв WHEREпредложение и укажите ORDER BYи LIMIT.

Инициализируйте $responseмассив с требуемыми значениями и верните в формате JSON.

Завершенный код

<?php
include 'config.php';

## Read value
$draw = $_POST['draw'];
$row = $_POST['start'];
$rowperpage = $_POST['length']; // Rows display per page
$columnIndex = $_POST['order'][0]['column']; // Column index
$columnName = $_POST['columns'][$columnIndex]['data']; // Column name
$columnSortOrder = $_POST['order'][0]['dir']; // asc or desc
$searchValue = mysqli_real_escape_string($con,$_POST['search']['value']); // Search value

## Date search value
$searchByFromdate = mysqli_real_escape_string($con,$_POST['searchByFromdate']);
$searchByTodate = mysqli_real_escape_string($con,$_POST['searchByTodate']);

## Search 
$searchQuery = " ";
if($searchValue != ''){
    $searchQuery = " and (emp_name like '%".$searchValue."%' or email like '%".$searchValue."%' or city like'%".$searchValue."%' ) ";
}

// Date filter
if($searchByFromdate != '' && $searchByTodate != ''){
    $searchQuery .= " and (date_of_joining between '".$searchByFromdate."' and '".$searchByTodate."' ) ";
}

## Total number of records without filtering
$sel = mysqli_query($con,"select count(*) as allcount from employee");
$records = mysqli_fetch_assoc($sel);
$totalRecords = $records['allcount'];

## Total number of records with filtering
$sel = mysqli_query($con,"select count(*) as allcount from employee WHERE 1 ".$searchQuery);
$records = mysqli_fetch_assoc($sel);
$totalRecordwithFilter = $records['allcount'];

## Fetch records
$empQuery = "select * from employee WHERE 1 ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit ".$row.",".$rowperpage;
$empRecords = mysqli_query($con, $empQuery);
$data = array();

while ($row = mysqli_fetch_assoc($empRecords)) {
    $data[] = array(
    "emp_name"=>$row['emp_name'],
    "email"=>$row['email'],
    "date_of_joining"=>$row['date_of_joining'],
    "salary"=>$row['salary'],
    "city"=>$row['city']
    );
}

## Response
$response = array(
    "draw" => intval($draw),
    "iTotalRecords" => $totalRecords,
    "iTotalDisplayRecords" => $totalRecordwithFilter,
    "aaData" => $data
);

echo json_encode($response);
die;

7. Демо

Посмотреть демо

8. Заключение

Передайте значения фильтра даты, используя ajax dataопцию. Вызовите draw()метод для экземпляра dataTable, чтобы перезагрузить данные после выбора даты начала и окончания.

Если в поле таблицы хранится временная метка UNIX вместо даты или формата даты и времени, вам необходимо преобразовать переданные значения фильтра даты из dataTable в формат временной метки UNIX с помощью strtotime()функции и использовать в поисковом запросе.

Источник:  https://makitweb.com

#php #ajax #jquery 

What is GEEK

Buddha Community

Поиск диапазона дат в DataTable с помощью jQuery AJAX и PHP

I am Developer

1615040237

PHP jQuery Ajax Post Form Data Example

PHP jquery ajax POST request with MySQL. In this tutorial, you will learn how to create and submit a simple form in PHP using jQuery ajax post request. And how to submit a form data into MySQL database without the whole page refresh or reload. And also you will learn how to show an error message to the user if the user does not fill any form field.

And this tutorial also guide on how to send data to MySQL database using AJAX + jQuery + PHP without reloading the whole page and show a client-side validation error message if it has an error in the form.

PHP jQuery AJAX POST Form Data In Into MySQL DB Example

Just follow the few below steps and easily create and submit ajax form in PHP and MySQL with client-side validation.

  • Create Database And Table
  • Create a Database Connection File
  • Create An Ajax POST Form in PHP
  • Create An Ajax Data Store File

https://www.tutsmake.com/php-jquery-ajax-post-tutorial-example/

#jquery ajax serialize form data example #submit form using ajax in php example #save form data using ajax in php #how to insert form data using ajax in php #php jquery ajax form submit example #jquery ajax and jquery post form submit example with php

Евгения Дмитриевна Белоусова

Евгения Дмитриевна Белоусова

1659344880

Поиск диапазона дат в DataTable с помощью jQuery AJAX и PHP

DataTable поставляется с одним полем поиска, которое можно использовать для поиска по всем или определенным полям и отображения отфильтрованных записей.

Вы можете добавлять пользовательские элементы в соответствии с вашими требованиями и использовать их с DataTable.

В этом руководстве я покажу, как реализовать поиск по диапазону дат в DataTable с помощью jQuery AJAX и PHP. Я использую jQuery UI для добавления выбора даты.

1. Структура таблицы

Создайте employeeтаблицу, и я добавил несколько записей.

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(80) NOT NULL, 
  `salary` varchar(20) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL,
  `date_of_joining` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Для поиска по дате создал 'date_of_joining'поле dateтипа.

2. Конфигурация

Создайте config.phpдля подключения к базе данных.

Завершенный код

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. Загрузите и включите

  • Скачать Datatables отсюда и jQuery UI отсюда .
  • Включите  datatables.min.css, jquery-ui.min.css, библиотеку jQuery jquery-ui.min.js, и datatables.min.jsв <head>раздел.
  • Вы также можете использовать CDN.
<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

<!-- jQuery UI CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- jQuery UI JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

4. HTML

Для фильтра даты создайте два текстовых элемента. Добавлено class='datepicker'для инициализации datepicker. Кроме того, создайте элемент кнопки.

Создать <table id='empTable'>.

Завершенный код

<div >
   <!-- Date Filter -->
   <table>
     <tr>
       <td>
          <input type='text' readonly id='search_fromdate' class="datepicker" placeholder='From date'>
       </td>
       <td>
          <input type='text' readonly id='search_todate' class="datepicker" placeholder='To date'>
       </td>
       <td>
          <input type='button' id="btn_search" value="Search">
       </td>
     </tr>
   </table>

   <!-- Table -->
   <table id='empTable' class='display dataTable'>
     <thead>
       <tr>
         <th>Employee name</th>
         <th>Email</th>
         <th>Date of Joining</th>
         <th>Salary</th>
         <th>City</th>
       </tr>
     </thead>

   </table>
</div>

5. Скрипт

Инициализировать datepickerна class='datepicker'.

Инициализировать DataTable на #empTable. Установить параметры – 'processing': true, 'serverSide': true, 'serverMethod': 'post'. Установите URL-адрес AJAX в 'ajaxfile.php'.

С 'ajax' dataопцией фильтрации даты от и до даты путем добавления в dataобъект. Присвойте from_dateзначение в data.searchByFromdateи to_dateзначение в data.searchByTodate.

Параметр With 'columns'указывает имена ключей, которые необходимо прочитать из ответа AJAX.

На кнопке поиска нажмите вызов dataTable.draw(), чтобы перерисовать DataTable и передать значения фильтра.

Завершенный код

$(document).ready(function(){

   // Datapicker 
   $( ".datepicker" ).datepicker({
      "dateFormat": "yy-mm-dd",
      changeYear: true
   });

   // DataTable
   var dataTable = $('#empTable').DataTable({
     'processing': true,
     'serverSide': true,
     'serverMethod': 'post',
     'searching': true, // Set false to Remove default Search Control
     'ajax': {
       'url':'ajaxfile.php',
       'data': function(data){
          // Read values
          var from_date = $('#search_fromdate').val();
          var to_date = $('#search_todate').val();

          // Append to data
          data.searchByFromdate = from_date;
          data.searchByTodate = to_date;
       }
     },
     'columns': [
        { data: 'emp_name' },
        { data: 'email' },
        { data: 'date_of_joining' },
        { data: 'salary' },
        { data: 'city' },
     ]
  });

  // Search button
  $('#btn_search').click(function(){
     dataTable.draw();
  });

});

6. PHP

Создайте ajaxfile.phpфайл для обработки запросов AJAX.

Прочитайте значения DataTable POST и назначьте их переменным.

Кроме того, прочитайте переданные значения фильтра даты и назначьте in $searchByFromdateи $searchByTodate.

Если $searchValueне пусто, то подготавливает запрос фильтра поиска. Используйте $searchValueдля поиска по полям emp_name, email и city.

Если $searchByFromdateи $searchByTodateне пусто, подготовьте и объедините запрос фильтра поиска в файле $searchQuery. Используйте между, чтобы выбрать записи, date_of_joiningзначение поля которых находится между $searchByFromdateи $searchByTodate.

Подсчитайте количество записей с фильтром и без него из employeeтаблицы. Назначьте итоговые записи без фильтра $totalRecordsи с фильтром в $totalRecordwithFilter.

Извлеките записи из employeeтаблицы, где перейдите $searchQueryв WHEREпредложение и укажите ORDER BYи LIMIT.

Инициализируйте $responseмассив с требуемыми значениями и верните в формате JSON.

Завершенный код

<?php
include 'config.php';

## Read value
$draw = $_POST['draw'];
$row = $_POST['start'];
$rowperpage = $_POST['length']; // Rows display per page
$columnIndex = $_POST['order'][0]['column']; // Column index
$columnName = $_POST['columns'][$columnIndex]['data']; // Column name
$columnSortOrder = $_POST['order'][0]['dir']; // asc or desc
$searchValue = mysqli_real_escape_string($con,$_POST['search']['value']); // Search value

## Date search value
$searchByFromdate = mysqli_real_escape_string($con,$_POST['searchByFromdate']);
$searchByTodate = mysqli_real_escape_string($con,$_POST['searchByTodate']);

## Search 
$searchQuery = " ";
if($searchValue != ''){
    $searchQuery = " and (emp_name like '%".$searchValue."%' or email like '%".$searchValue."%' or city like'%".$searchValue."%' ) ";
}

// Date filter
if($searchByFromdate != '' && $searchByTodate != ''){
    $searchQuery .= " and (date_of_joining between '".$searchByFromdate."' and '".$searchByTodate."' ) ";
}

## Total number of records without filtering
$sel = mysqli_query($con,"select count(*) as allcount from employee");
$records = mysqli_fetch_assoc($sel);
$totalRecords = $records['allcount'];

## Total number of records with filtering
$sel = mysqli_query($con,"select count(*) as allcount from employee WHERE 1 ".$searchQuery);
$records = mysqli_fetch_assoc($sel);
$totalRecordwithFilter = $records['allcount'];

## Fetch records
$empQuery = "select * from employee WHERE 1 ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit ".$row.",".$rowperpage;
$empRecords = mysqli_query($con, $empQuery);
$data = array();

while ($row = mysqli_fetch_assoc($empRecords)) {
    $data[] = array(
    "emp_name"=>$row['emp_name'],
    "email"=>$row['email'],
    "date_of_joining"=>$row['date_of_joining'],
    "salary"=>$row['salary'],
    "city"=>$row['city']
    );
}

## Response
$response = array(
    "draw" => intval($draw),
    "iTotalRecords" => $totalRecords,
    "iTotalDisplayRecords" => $totalRecordwithFilter,
    "aaData" => $data
);

echo json_encode($response);
die;

7. Демо

Посмотреть демо

8. Заключение

Передайте значения фильтра даты, используя ajax dataопцию. Вызовите draw()метод для экземпляра dataTable, чтобы перезагрузить данные после выбора даты начала и окончания.

Если в поле таблицы хранится временная метка UNIX вместо даты или формата даты и времени, вам необходимо преобразовать переданные значения фильтра даты из dataTable в формат временной метки UNIX с помощью strtotime()функции и использовать в поисковом запросе.

Источник:  https://makitweb.com

#php #ajax #jquery 

Максим Владимирович Назаров

Максим Владимирович Назаров

1659811440

Удалить несколько записей в таблицах данных с помощью jQuery AJAX PHP

Плагин DataTables — это самый простой способ добавить пагинацию на страницу со всеми необходимыми функциями.

Для добавления элемента управления удалением вы можете либо добавить кнопку удаления для каждой записи, либо добавить флажки и одну кнопку удаления.

В этом руководстве я покажу, как добавить несколько флажков и удалить выбранные записи одним щелчком мыши в DataTables с помощью jQuery AJAX.

1. Структура таблицы

Создать employeeтаблицу.

CREATE TABLE `employee` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `emp_name` varchar(60) NOT NULL,
  `salary` varchar(50) NOT NULL,
  `gender` varchar(10) NOT NULL,
  `city` varchar(80) NOT NULL,
  `email` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Конфигурация

Создайте соединение config.phpдля базы данных.

Завершенный код

<?php

$host = "localhost"; /* Host name */$user = "root"; /* User */$password = ""; /* Password */$dbname = "tutorial"; /* Database name */
$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

3. Загрузите и включите

  • Скачайте Datatables отсюда .
  • Включите  datatables.min.cssи datatables.min.jsв <head>раздел, а также включите библиотеку jQuery.
  • Вы также можете использовать CDN.
<!-- Datatable CSS -->
<link href='//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Datatable JS -->
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

4. HTML

Создайте <table id='empTable' class='display dataTable' >.

Добавить строку заголовка.

В последнюю ячейку добавьте флажок «Отметить все» и кнопку для удаления отмеченных записей.

Завершенный код

<div >

   <!-- Table -->
   <table id='empTable' class='display dataTable'>
     <thead>
       <tr>
         <th>Employee name</th>
         <th>Email</th>
         <th>Gender</th>
         <th>Salary</th>
         <th>City</th>
         <th>Check All <input type="checkbox" class='checkall' id='checkall'><input type="button" id='delete_record' value='Delete' ></th>
       </tr>
     </thead>

   </table>
</div>

5. Скрипт

Инициализация таблицы данных —

Инициализировать DataTable на <table id='empTable' >.

Добавьте 'processing': true, 'serverSide': true, 'serverMethod': 'post'. Укажите URL-адрес AJAX и данные, используя 'ajax'параметр.

Использование 'columns'параметра для указания имен полей, которые необходимо прочитать из ответа AJAX.

Убрать сортировку из последнего столбца с помощью columnDefsопции.

Проверить все -

Если флажок checkall установлен, проверьте, отмечен он или нет. Если флажок установлен, установите все флажки, отмеченные class='delete_check'.

Если флажок не установлен, снимите флажок со всех флажков.

Флажок установлен –

Создайте checkcheckbox()функцию.

Подсчитайте общее количество флажков и отмеченных флажков class='delete_check'на странице.

Если общее количество флажков равно общему количеству отмеченных флажков, установите флажок для всех флажков, в противном случае снимите флажок.

Кнопка Удалить –

Прочитайте все отмеченные флажки class='delete_check'и поместите значение в deleteids_arrмассив.

Если deleteids_arrдлина массива больше, отобразите предупреждение о подтверждении. Отправьте запрос AJAX POST в ajaxfile.php для удаления записей при okнажатии кнопки.

Проходите request: 2, deleteids_arr: deleteids_arrкак data.

При успешном обратном вызове перезагрузите Datatable, вызвав dataTable.ajax.reload().

Завершенный код

var dataTable;
$(document).ready(function(){

   // Initialize datatable
   dataTable = $('#empTable').DataTable({
     'processing': true,
     'serverSide': true,
     'serverMethod': 'post',
     'ajax': {
        'url':'ajaxfile.php',
        'data': function(data){
           
           data.request = 1;

        }
     },
     'columns': [
        { data: 'emp_name' },
        { data: 'email' },
        { data: 'gender' },
        { data: 'salary' },
        { data: 'city' },
        { data: 'action' },
     ],
     'columnDefs': [ {
       'targets': [5], // column index (start from 0)
       'orderable': false, // set orderable false for selected columns
     }]
   });

   // Check all 
   $('#checkall').click(function(){
      if($(this).is(':checked')){
         $('.delete_check').prop('checked', true);
      }else{
         $('.delete_check').prop('checked', false);
      }
   });

   // Delete record
   $('#delete_record').click(function(){

      var deleteids_arr = [];
      // Read all checked checkboxes
      $("input:checkbox[class=delete_check]:checked").each(function () {
         deleteids_arr.push($(this).val());
      });

      // Check checkbox checked or not
      if(deleteids_arr.length > 0){

         // Confirm alert
         var confirmdelete = confirm("Do you really want to Delete records?");
         if (confirmdelete == true) {
            $.ajax({
               url: 'ajaxfile.php',
               type: 'post',
               data: {request: 2,deleteids_arr: deleteids_arr},
               success: function(response){
                  dataTable.ajax.reload();
               }
            });
         } 
      }
   });

});

// Checkbox checked
function checkcheckbox(){

   // Total checkboxes
   var length = $('.delete_check').length;

   // Total checked checkboxes
   var totalchecked = 0;
   $('.delete_check').each(function(){
      if($(this).is(':checked')){
         totalchecked+=1;
      }
   });

   // Checked unchecked checkbox
   if(totalchecked == length){
      $("#checkall").prop('checked', true);
   }else{
      $('#checkall').prop('checked', false);
   }
}

6. PHP

Создайте ajaxfile.phpфайл.

Из этого файла обработайте два запроса AJAX —

  • Если $request == 1затем прочитать значения POST DataTables. Если $searchQueryне пусто, подготовьте поисковый запрос. Подсчитайте общее количество записей без фильтра и с фильтром.

Выбрать записи из employeeтаблицы, где указать поисковый запрос, упорядочить по и ограничить.

Зациклиться на извлеченных записях и инициализировать $dataмассив ключами, указанными в columnsопции, при инициализации dataTable.

Назначьте флажок в ‘action’ключе. В добавленном флажке onclick=‘checkcheckbox()’передайте атрибут и .$row[‘id’]valueclass=‘delete_check’

Назначьте необходимые ключи со значениями в $responseмассиве и верните в формате JSON.

  • Если $request == 2затем зациклиться на $deleteids_arrмассиве и выполнить DELETEзапрос по идентификатору.

Завершенный код

<?php
include 'config.php';

$request = $_POST['request'];

// Datatable data
if($request == 1){
   ## Read value
   $draw = $_POST['draw'];
   $row = $_POST['start'];
   $rowperpage = $_POST['length']; // Rows display per page
   $columnIndex = $_POST['order'][0]['column']; // Column index
   $columnName = $_POST['columns'][$columnIndex]['data']; // Column name
   $columnSortOrder = $_POST['order'][0]['dir']; // asc or desc
   $searchValue = mysqli_real_escape_string($con,$_POST['search']['value']); // Search value

   ## Search 
   $searchQuery = " ";
   if($searchValue != ''){
      $searchQuery .= " and (emp_name like '%".$searchValue."%' or 
email like '%".$searchValue."%' or 
city like'%".$searchValue."%' ) ";
   }

   ## Total number of records without filtering
   $sel = mysqli_query($con,"select count(*) as allcount from employee");
   $records = mysqli_fetch_assoc($sel);
   $totalRecords = $records['allcount'];

   ## Total number of records with filtering
   $sel = mysqli_query($con,"select count(*) as allcount from employee WHERE 1 ".$searchQuery);
   $records = mysqli_fetch_assoc($sel);
   $totalRecordwithFilter = $records['allcount'];

   ## Fetch records
   $empQuery = "select * from employee WHERE 1 ".$searchQuery." order by ".$columnName." ".$columnSortOrder." limit ".$row.",".$rowperpage;
   $empRecords = mysqli_query($con, $empQuery);
   $data = array();

   while ($row = mysqli_fetch_assoc($empRecords)) {
      $data[] = array(
         "emp_name"=>$row['emp_name'],
         "email"=>$row['email'],
         "gender"=>$row['gender'],
         "salary"=>$row['salary'],
         "city"=>$row['city'],
         "action"=>"<input type='checkbox' class='delete_check' id='delcheck_".$row['id']."' onclick='checkcheckbox();' value='".$row['id']."'>"
      );
   }

   ## Response
   $response = array(
      "draw" => intval($draw),
      "iTotalRecords" => $totalRecords,
      "iTotalDisplayRecords" => $totalRecordwithFilter,
      "aaData" => $data
   );

   echo json_encode($response);
   exit;
}

// Delete record
if($request == 2){

   $deleteids_arr = array();

   if(isset($_POST['deleteids_arr'])){
      $deleteids_arr = $_POST['deleteids_arr'];
   }
   foreach($deleteids_arr as $deleteid){
      mysqli_query($con,"DELETE FROM employee WHERE id=".$deleteid);
   }

   echo 1;
   exit;
}

7. Выход

Просмотр вывода

8. Заключение

Создайте отдельную колонку для добавления флажков с записями.

На кнопке удаления нажмите цикл на отмеченных флажках и отправьте запрос AJAX, чтобы УДАЛИТЬ его и обновить DataTable.

Источник:  https://makitweb.com

#php #datatable #ajax #jquery 

Einar Hintz

Einar Hintz

1602560783

jQuery Ajax CRUD in ASP.NET Core MVC with Modal Popup

In this article, we’ll discuss how to use jQuery Ajax for ASP.NET Core MVC CRUD Operations using Bootstrap Modal. With jQuery Ajax, we can make HTTP request to controller action methods without reloading the entire page, like a single page application.

To demonstrate CRUD operations – insert, update, delete and retrieve, the project will be dealing with details of a normal bank transaction. GitHub repository for this demo project : https://bit.ly/33KTJAu.

Sub-topics discussed :

  • Form design for insert and update operation.
  • Display forms in modal popup dialog.
  • Form post using jQuery Ajax.
  • Implement MVC CRUD operations with jQuery Ajax.
  • Loading spinner in .NET Core MVC.
  • Prevent direct access to MVC action method.

Create ASP.NET Core MVC Project

In Visual Studio 2019, Go to File > New > Project (Ctrl + Shift + N).

From new project window, Select Asp.Net Core Web Application_._

Image showing how to create ASP.NET Core Web API project in Visual Studio.

Once you provide the project name and location. Select Web Application(Model-View-Controller) and uncheck HTTPS Configuration. Above steps will create a brand new ASP.NET Core MVC project.

Showing project template selection for .NET Core MVC.

Setup a Database

Let’s create a database for this application using Entity Framework Core. For that we’ve to install corresponding NuGet Packages. Right click on project from solution explorer, select Manage NuGet Packages_,_ From browse tab, install following 3 packages.

Showing list of NuGet Packages for Entity Framework Core

Now let’s define DB model class file – /Models/TransactionModel.cs.

public class TransactionModel
{
    [Key]
    public int TransactionId { get; set; }

    [Column(TypeName ="nvarchar(12)")]
    [DisplayName("Account Number")]
    [Required(ErrorMessage ="This Field is required.")]
    [MaxLength(12,ErrorMessage ="Maximum 12 characters only")]
    public string AccountNumber { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Beneficiary Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BeneficiaryName { get; set; }

    [Column(TypeName ="nvarchar(100)")]
    [DisplayName("Bank Name")]
    [Required(ErrorMessage = "This Field is required.")]
    public string BankName { get; set; }

    [Column(TypeName ="nvarchar(11)")]
    [DisplayName("SWIFT Code")]
    [Required(ErrorMessage = "This Field is required.")]
    [MaxLength(11)]
    public string SWIFTCode { get; set; }

    [DisplayName("Amount")]
    [Required(ErrorMessage = "This Field is required.")]
    public int Amount { get; set; }

    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime Date { get; set; }
}

C#Copy

Here we’ve defined model properties for the transaction with proper validation. Now let’s define  DbContextclass for EF Core.

#asp.net core article #asp.net core #add loading spinner in asp.net core #asp.net core crud without reloading #asp.net core jquery ajax form #asp.net core modal dialog #asp.net core mvc crud using jquery ajax #asp.net core mvc with jquery and ajax #asp.net core popup window #bootstrap modal popup in asp.net core mvc. bootstrap modal popup in asp.net core #delete and viewall in asp.net core #jquery ajax - insert #jquery ajax form post #modal popup dialog in asp.net core #no direct access action method #update #validation in modal popup

I am Developer

1597487472

Country State City Dropdown list in PHP MySQL PHP

Here, i will show you how to populate country state city in dropdown list in php mysql using ajax.

Country State City Dropdown List in PHP using Ajax

You can use the below given steps to retrieve and display country, state and city in dropdown list in PHP MySQL database using jQuery ajax onchange:

  • Step 1: Create Country State City Table
  • Step 2: Insert Data Into Country State City Table
  • Step 3: Create DB Connection PHP File
  • Step 4: Create Html Form For Display Country, State and City Dropdown
  • Step 5: Get States by Selected Country from MySQL Database in Dropdown List using PHP script
  • Step 6: Get Cities by Selected State from MySQL Database in DropDown List using PHP script

https://www.tutsmake.com/country-state-city-database-in-mysql-php-ajax/

#country state city drop down list in php mysql #country state city database in mysql php #country state city drop down list using ajax in php #country state city drop down list using ajax in php demo #country state city drop down list using ajax php example #country state city drop down list in php mysql ajax