Попытка реализовать поиск AJAX в EJS - PullRequest
Новая
       2

Попытка реализовать поиск AJAX в EJS

1 голос
/ 07 мая 2020

Я вызываю / комментирую API и пытаюсь добавить на него функцию поиска AJAX. Но я попробовал несколько методов после поиска в Google, но все еще на той же странице, пожалуйста, помогите мне решить этот запрос.

Когда я пытаюсь позвонить / прокомментировать, я получаю таблицу с двумя столбцами, budgetid , и комментарий, я пытаюсь разместить поле поиска ajax для каждого budgetid и комментарий в верхней части таблицы.

Server. js

const express = require('express');
const chalk = require('chalk');
const debug = require('debug');
const morgan = require('morgan');
const path = require('path');

const app = express();
const port = process.env.PORT || 80;
const router = express.Router();

app.use(morgan('tiny'));
app.use(express.static(path.join(__dirname, '/public/')));
app.use('/css', express.static(path.join(__dirname, '/node_modules/bootstrap/dist/css')));
app.use('/js', express.static(path.join(__dirname, '/node_modules/bootstrap/dist/js')));
app.use('/js', express.static(path.join(__dirname, '/node_modules/jquery/dist')));
app.set('views', './src/views');
app.set('view engine', 'ejs');

router.route('/')
    .get((req, res) => {
        const result = [
            [1, 'One+Two'],
            [2, 'Two'],
            [3, 'Three+3'],
            [4, 'Four+2'],
            [5, 'Five+4'],
            [6, 'Six'],
            [7, 'Seven'],
            [8, 'Eight'],
            [9, 'Nine'],
            [10, 'Ten']
        ];
        res.render('tabledata', { rows: result });
    });

app.use('/comment', router);
app.get('/', function (req, res) {
    // res.sendFile(path.join(__dirname, 'views', 'index.html'));
    res.render('index', { list: ['a', 'b'], title: 'Lab' });
});

app.listen(port, function () {
    console.log(`listening on port ${chalk.green(port)}`);
    debug(`listening at port ${chalk.green(port)}`);
});

tabledata.e js

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body style="background-color: hsla(89, 43%, 51%, 0.3);">
        <h2 style="text-align:center"> My Heading</h2>
        <form method="post" action="/postcomment">
            <table id="budgetcomment" align="center" style="border-collapse: collapse; width: 35%; border: 1px solid black;">
                <tr style="background-color: whitesmoke;">
                    <th style="border: 1px solid black; padding: 8px; 
                    text-align: center; border-bottom: ''; background-color: #4CAF50;
                    color: white;">
                        <b>Budget ID</b>
                    </th>
                    <th style="border: 1px solid black; padding: 8px; text-align: center; 
                    border-bottom: ''; background-color: #4CAF50; color: white;">
                        <b>Comment</b>
                    </th>
                </tr>  
                <form action = "/search" method="post">
                <tr>
                    <td style="border: 1px solid black; padding: 8px; text-align: center; border-bottom: '';">
                        <input type="text" id="budgetid" name="budgetid" placeholder="Search Budget ID">
                    </td>
                    <td style="border: 1px solid black; padding: 8px; text-align: center; border-bottom: '';">
                        <input type="text" id="comment" name="comment" placeholder="Search Comment">
                    </td>
                </tr>   
                </form>
                <% for(const row of rows) { %>
                    <div class="form-group">
                        <tr>
                            <% for(const el of row) { %>
                                <td style="border: 1px solid black; padding: 8px; text-align: center; border-bottom: '';">
                                    <input type='text' name='data' value="<%= el %>"/>
                                </td>
                            <% } %>
                        </tr>
                    </div>
                <% } %>
                <tr>
                    <td colspan="2" align="center"><button type="submit" name="submit" class="btn btn-primary">Submit</button></td>
                </tr>
            </table>
        </form>
        <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
        <script>
          $(document).ready( function () {
            $('#budgetid').DataTable();
          });
        </script>
    </body>
</html>
...