Блог

Я изучаю ReactJS. Очень интересно работать с React Js. Но каждый раз я сталкиваюсь с большими проблемами при обработке JavaScript и jQuery, которые присутствуют внутри шаблона. На этот раз я столкнулся с проблемой с таблицей, в которой есть фильтр поиска jQuery, автоматическая разбивка на страницы и т. Д. Все эти эффекты jQuery отлично работают для статических данных. Если я добавляю динамические данные для строки таблицы, эффекты jQuery не работают.

Я прикрепил картинку выше. Первая строка статична, но вторая и третья строки взяты из базы данных. Если вы отметите, то увидите, что знак » » не виден для 2-й и 3-й строк. Даже строка поиска также не показывает результатов для 2-й и 3-й строк.

 import React, { Component } from 'react';
import DatabaseRow from '../components/Database/DatabaseRow';
import axios from 'axios';
class Database extends Component {
    constructor(){
        super()
        this.state={
           getData:[]
        }
    }

    componentDidMount(){
        axios.get('alumni/database')
            .then(response=>{
              console.log(response);
                this.setState({
                    getData:response.data
                })
                
            })
            .catch(error=>{
                console.log(error);
            })
    }


 render() {
        const mydata=this.state.getData;
        const eventDetails=mydata.map((mylist)=>{
        return <DatabaseRow
                        full_name={mylist.full_name}
                        dept={mylist.dept}
                        batch={mylist.batch}
                        faculty={mylist.faculty}
                        b_group={mylist.b_group}
                        occupation={mylist.occupation}
                        address={mylist.address}
                        phone={mylist.phone}
                        email={mylist.email}
                        roll={mylist.roll}
                        passoutyear={mylist.passoutyear}/>
          })
        return (
            <React.Fragment>
                <section class="shadow pb-3" style = {{paddingTop: "7rem"}}>
    <center>
        <h2 class="h2">Alumni Database  </h2>
    </center>
     
</section>
<section style={{marginTop: "5rem", marginBottom: "5rem"}}>
<div className="container">
<table id="responsive-data-table" className="table dt-responsive nowrap table-hover" style={{width:"100%"}}>
  <thead>
    <tr>
      <th>Name</th>
      <th>Department</th>
      <th>Batch</th>
      <th>Faculty</th>
      <th>Blood Group</th>
      <th>Current Position</th>
      <th>Present Address</th>
      <th>Phone</th>
      <th>E-mail</th>
      <th>Roll</th>
      <th>Passout</th>
    </tr>
  </thead>

  <tbody>
  <DatabaseRow
                        full_name="Munna"
                        dept="ICT"
                        batch="BICE18"
                        faculty="FST"
                        b_group="O "
                        occupation="Student"
                        address="DHAKA"
                        phone="9284721"
                        email="abc@gmail.com"
                        roll="2856239084"
                        passoutyear="2002"/>
    {eventDetails}
  </tbody>
</table>


</div>

</section>
            </React.Fragment>
        );
    }
}

export default Database; 
  

это мой родительский компонент, а дочерний компонент:

 import React, { Component } from 'react';

class DatabaseRow extends Component {
    render() {
        return (
            
                <tr>
                    <td>{this.props.full_name}</td>
                    <td>{this.props.dept}</td>
                    <td>{this.props.batch}</td>
                    <td>{this.props.dept}</td>
                    <td>{this.props.b_group}</td>
                    <td>{this.props.occupation}</td>
                    <td>{this.props.address}</td>
                    <td>{this.props.phone}</td>
                    <td>{this.props.email}</td>
                    <td>{this.props.roll}</td>
                    <td>{this.props.passout_year}</td>
              </tr>
          
        );
    }
}

export default DatabaseRow;
  

API базы данных в порядке. Это дает результат, проверенный в Postman. Я добавил теги, содержащие jQuery и cdn в index.html , файл также приведен ниже

     <!DOCTYPE html>
    
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="logo.png" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
          <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
          name="description"
          content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    
     
        <!-- Material Design for Bootstrap fonts and icons -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material Icons">
    
        <!-- Material Design for Bootstrap CSS -->
        <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
    
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">
        <title>CONNEXION</title>
    
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <!--
          This HTML file is a template.
          If you open it directly in the browser, you will see an empty page.
    
          You can add webfonts, meta tags, or analytics to this file.
          The build step will place the bundled scripts into the <body> tag.
    
          To begin the development, run `npm start` or `yarn start`.
          To create a production bundle, use `npm run build` or `yarn build`.
        -->
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script >
          jQuery(document).ready(function() {
          jQuery('#responsive-data-table').DataTable({
            "aLengthMenu": [[20, 30, 50, 75, -1], [20, 30, 50, 75, "All"]],
            "pageLength": 20,
            "dom": '<"row justify-content-between top-information"lf>rt<"row justify-content-between bottom-information"ip><"clear">'
          });
        });
    
        </script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs SvzG8fXVWP kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/ NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
        <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
        <script src="assets/js/custom.js"></script>
        <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> 
        <script src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
        
    
      </body>
    </html>
  

если кто-то заинтересован, пожалуйста, посмотрите на эту проблему. Большое спасибо