Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.08.2022, 10:40
Интересующийся
Отправить личное сообщение для Ivan65913 Посмотреть профиль Найти все сообщения от Ivan65913
 
Регистрация: 28.07.2022
Сообщений: 16

Как фильтровать список без перезагрузки страницы?
Логика:
- пользователь вводит критерии фильтра в поле фильтра;
- результат: список фильтруется без перезагрузки страницы;

Примечание
Критерием для фильтра является текст.
Фильтрация осуществляется по полю: title
В данном примере текущее содержание поля title, текст типа "Articles-…’ ", является условным.
В будущем в поле title может находится словосочетание из нескольких слов ( как текстовый заголовок, так и ФИО и т.д. по аналогии).

home.controller.js
const fs = require('fs');

exports.getHomePage = (req, res) => {
    let query = "SELECT * FROM `articles` ORDER BY id ASC"; // query database to get all the players

    // execute query
    db.query(query, (err, result) => {
        if (err) {
            res.redirect('/');
        }

        res.render('index.ejs', {
            title: "Welcome to DB",
            articles: result
        });
    });
};




index.routes.js
const express = require("express");
const router = express.Router();
const homeController = require('../controllers/home.controller');
router.get('/', homeController.getHomePage);
module.exports = router;


app.js
const express = require('express');
const fileUpload = require('express-fileupload');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const path = require('path');

const app = express();

const articleRoutes = require('./routes/article.routes');
const homeRoutes = require('./routes/index.routes');
const port = 2000;


// create connection to database
// the mysql.createConnection function takes in a configuration object which contains host, user, password and the database name.
const db = mysql.createConnection ({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'socka'
});

// connect to database
db.connect((err) => {
    if (err) {
        throw err;
    }
    console.log('Connected to database');
});
global.db = db;

// configure middleware
app.set('port', process.env.port || port);                  // set express to use this port
app.set('views', __dirname + '/views');                     // set express to look in this folder to render our view
app.set('view engine', 'ejs');                              // configure template engine
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());                                 // parse form data client
app.use(express.static(path.join(__dirname, 'public')));    // configure express to use public folder
app.use(fileUpload());                                      // configure fileupload

// routes for the app
app.use('/', homeRoutes);
// app.use('/player', playerRoutes);
app.use('/article', articleRoutes);
app.get('*', function(req, res, next){
    res.status(404);

    res.render('404.ejs', {
        title: "Page Not Found",
    });

});

// set the app to listen on the port
app.listen(port, () => {
    console.log(`Server running on port: ${port}`);
});


index.ejs
https://jsfiddle.net/User65659/tz01nk7b/4/

SQL
Код:
CREATE DATABASE socka;

--
-- Структура таблицы `articles`
--
DROP TABLE IF EXISTS `articles`;
CREATE TABLE IF NOT EXISTS `articles` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `content` text,
  `background` text,
  `owner` int(11) DEFAULT NULL,
  `pos` int(11) DEFAULT '0',
  `lang` int(11) DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=275 DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;


--
-- Структура таблицы `articles`
--
INSERT INTO `articles` (`id`, `title`, `content`, `background`, `owner`, `pos`, `lang`) VALUES
(1, 'Articles-1', 'Content--Articles-1', NULL, NULL, 0, 1),
(2, 'Articles-1-1', 'Content--Articles-1-1', NULL, 1, 0, 1),
(3, 'Articles-1-2', 'Content--Articles-1-2', NULL, 1, 0, 1),
(4, 'Articles-1-3', 'Content--Articles-1-3', NULL, 1, 0, 1),
(5, 'Articles-1-1-1', 'Content--Articles-1-1-1', NULL, 2, 0, 1),
(6, 'Articles-1-1-2', 'Content--Articles-1-1-2', NULL, 2, 0, 1),
(7, 'Articles-1-1-3', 'Content--Articles-1-1-3', NULL, 2, 0, 1),
(8, 'Articles-2', 'Content--Articles-2', NULL, NULL, 0, 1),
(9, 'Articles-3', 'Content--Articles-3', NULL, NULL, 0, 1),
(10, 'Articles-4', 'Content--Articles-4', NULL, NULL, 0, 1),
(11, 'Articles-5', 'Content--Articles-5', NULL, NULL, 0, 2);
Изображения:
Тип файла: jpg 12.08.2022_17-53-15_Filter.jpg (10.1 Кб, 0 просмотров)
Тип файла: jpg 12.08.2022_17-55-53.jpg (27.6 Кб, 0 просмотров)
Тип файла: jpg 12.08.2022_17-57-09.jpg (5.0 Кб, 0 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализовать динамическую подгрузку контента без перезагрузки страницы ? sasha3611 Элементы интерфейса 7 24.04.2018 09:21
Отправка e-mail без перезагрузки страницы raffx AJAX и COMET 2 26.11.2013 16:13
Ребят помогите получить данные без перезагрузки страницы SpiritDark AJAX и COMET 1 17.03.2012 14:57
Подгрузка информера без перезагрузки страницы splean Общие вопросы Javascript 6 13.03.2009 15:31
Автообновление <div> без перезагрузки страницы Antihrist AJAX и COMET 14 28.07.2008 06:06