Twitter Bootstrap Question posted in

How to integrate bootstrap 4 datatable in reactjs?-Twitter bootstrap

i am working on reactjs in which i want to use bootstrap 4 data table. (Link: https://datatables.net/examples/styling/bootstrap4). i have imported the required js and css into the application but bootstrap 4 datatable pagination is not working as expectation. Following are the code and screenshort of the output:
enter image description here

index.html
<!DOCTYPE html>  
<html lang = "en">  
   <head>  
      <meta charset = "UTF-8">  
      <title>Hailo Web Portal</title>  
       <!-- Favicon icon -->
      <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
      <!-- fontawesome icon -->
      <link rel="stylesheet" href="assets/fonts/fontawesome/css/fontawesome-all.min.css">
      <!-- animation css -->
      <link rel="stylesheet" href="assets/plugins/animation/css/animate.min.css">
      <!-- vendor css -->
      <link rel="stylesheet" href="assets/css/style.css">

    <!--   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" >  -->  

      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
   </head>  
   <body>  
      <div id = "app"></div>  
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
      <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 src="assets/js/vendor-all.min.js"></script>
      <!-- <script src="./assets/js/vendor-all.min.js"></script> -->
       <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
      <script src="assets/js/pcoded.min.js"></script>
      <script src = 'index_bundle.js'></script>  

      <script>
         $(document).ready(function() {
            $('#example').DataTable();
         });
      </script>


   </body>  
</html>  


main.js
/*import $ from 'jquery';  
import Popper from 'popper.js';  */
/*
import '../node_modules/bootstrap/dist/js/bootstrap.bundle.min'; */
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from  './App.js';
import 'bootstrap';
require('bootstrap/dist/css/bootstrap.css');

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,document.getElementById('app')); 



login.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./Login.css";
import BackgroundImage from "../assets/backgroundImage.png";

/* const emailRegex = RegExp(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/); */
const emailRegex = RegExp(/^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/);

const formValid = ({ formErrors, ...rest }) => {
  console.log("formErrors=====>", formErrors);
  console.log("...rest========>", rest);
  let valid = true;
  Object.values(formErrors).forEach(val => {
    console.log("val--->", val);
    val.length > 0 && (valid = false);
  });

  Object.values(rest).forEach(val => {
    val === null && (valid = false);
  });
  console.log("valid---->", valid);
  return valid;
};

const bgimage = {
  backgroundImage: `url(${BackgroundImage})`
};

class Login extends Component {
  _isMounted = false;
  constructor(props) {
    super(props);
    this.state = {
      email: null,
      password: null,
      formErrors: {
        email: "",
        password: ""
      },
      userLists: []
    };

    this.getAllUsersLists = this.getAllUsersLists.bind(this);
  }

  componentDidMount() {
    this._isMounted = true;
    this.getAllUsersLists();
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  getAllUsersLists = () => {
    const url = "http://192.168.15.149" + ":9001" + "/getAllRoles";
    const options = {
      method: "GET"
    };
    fetch(url, options)
      .then(results => results.json())
      .then(
        data => {
          if (data.status == "Failure") {
            if (this._isMounted) {
              this.setState({ userLists: [] });
            }
          } else {
            if (this._isMounted) {
              this.setState({
                userLists: data
              });

            }
          }
        },
        error => {
          if (this._isMounted) {
            this.setState({ userLists: [] });
          }
        }
      );
  };

  render() {
    const { formErrors } = this.state;
    return (
      <div>
        <h1>Test</h1>
        <table id="example" className="table table-striped table-bordered" style={{ width: "100%" }}>
          <thead>
            <tr>
              <th>Name</th>
              <th>Description</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {this.state.userLists.map((ul, index) => (
              <tr key={ul.id} id={index+1}>
                <td>{ul.role_name}</td>
                <td>{ul.description}</td>
                <td>{ul.status}</td>
              </tr>
            ))}             
          </tbody>         
        </table>
      </div>
    );
  }
}

export default Login;


Any help is appreciated. Thanks in advance.
Tags:

2

Answers


  1. 0

    I would suggest you to use react-bootstrap-table-next
    you can try demo and follow the docs for more functionallity and much more easy to customised for the react you can try

    Login or Signup to reply.
  2. 0

    try it:

    npm install –save datatables.net-dt

    In your root component you need import this dependences:

    import “datatables.net-dt/js/dataTables.dataTables”

    import “datatables.net-dt/css/jquery.dataTables.min.css”

    so you can load your table.

      componentDidMount() {
   $(document).ready(function () {
      $('#myTable').DataTable();
   });
  }

    this work for me.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search