Html Table With Bootstrap Jquery For Full Crud Operations

5.1. Create (Add) Operation

Goal: Let users add new entries to the table.

Steps:

1. Add an 'Add' Button:

<button class="btn btn-success mb-3" id="addUserBtn">Add User</button>

2. Create a Modal for Input:

<!-- Add User Modal -->
<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addUserModalLabel">Add New User</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="addUserForm">
          <div class="mb-3">
            <label for="userName" class="form-label">Name</label>
            <input type="text" class="form-control" id="userName" required>
          </div>
          <div class="mb-3">
            <label for="userEmail" class="form-label">Email</label>
            <input type="email" class="form-control" id="userEmail" required>
          </div>
          <button type="submit" class="btn btn-primary">Add User</button>
        </form>
      </div>
    </div>
  </div>
</div>

3. jQuery to Handle Form Submission:

$(document).ready(function(){
  // Show Add User Modal
  $('#addUserBtn').click(function(){
    $('#addUserModal').modal('show');
  });

  // Handle Add User Form Submission
  $('#addUserForm').submit(function(event){
    event.preventDefault();
    var name = $('#userName').val();
    var email = $('#userEmail').val();

    // Add new row to the table
    var newRow = `
      <tr>
        <td>${$('#userTable tbody tr').length + 1}</td>
        <td>${name}</td>
        <td>${email}</td>
        <td>
          <button class="btn btn-primary btn-sm edit-btn">Edit</button>
          <button class="btn btn-danger btn-sm delete-btn">Delete</button>
        </td>
      </tr>
    `;
    $('#userTable tbody').append(newRow);

    // Hide the modal
    $('#addUserModal').modal('hide');

    // Reset the form
    $('#addUserForm')[0].reset();
  });
});

How it works:

• When you click "Add User", the modal pops up
• When you submit the form, it grabs the new user data, makes a new row, and adds it to the table
• Then it hides the modal and resets the form for next time

5.2. Read (View) Operation

Goal: Show data in an organized way so users can see existing entries.

Steps:

1. Add a Detailed View Modal:

<!-- View User Modal -->
<div class="modal fade" id="viewUserModal" tabindex="-1" aria-labelledby="viewUserModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="viewUserModalLabel">User Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p><strong>Name:</strong> <span id="viewName"></span></p>
        <p><strong>Email:</strong> <span id="viewEmail"></span></p>
      </div>
    </div>
  </div>
</div>

2. Add View Button in Actions:

<button class="btn btn-info btn-sm view-btn">View</button>

3. jQuery to Handle View Operation:

// Handle View Button Click
$(document).on('click', '.view-btn', function(){
  var currentRow = $(this).closest('tr');
  var name = currentRow.find('td:eq(1)').text();
  var email = currentRow.find('td:eq(2)').text();

  $('#viewName').text(name);
  $('#viewEmail').text(email);

  $('#viewUserModal').modal('show');
});

How it works:

• Each row gets a "View" button
• When clicked, it grabs the data from that row and shows it in a modal
• This gives a quick, detailed view of the user without cluttering the table

5.3. Update (Edit) Operation

Goal: Let users change existing data entries.

Steps:

1. Add an 'Edit' Button:

<button class="btn btn-primary btn-sm edit-btn">Edit</button>

2. Create an Edit Modal:

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editUserModalLabel">Edit User</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="editUserForm">
          <input type="hidden" id="editUserId">
          <div class="mb-3">
            <label for="editUserName" class="form-label">Name</label>
            <input type="text" class="form-control" id="editUserName" required>
          </div>
          <div class="mb-3">
            <label for="editUserEmail" class="form-label">Email</label>
            <input type="email" class="form-control" id="editUserEmail" required>
          </div>
          <button type="submit" class="btn btn-primary">Update User</button>
        </form>
      </div>
    </div>
  </div>
</div>

3. jQuery to Handle Edit Operation:

// Handle Edit Button Click
$(document).on('click', '.edit-btn', function(){
  var currentRow = $(this).closest('tr');
  var userId = currentRow.find('td:eq(0)').text();
  var userName = currentRow.find('td:eq(1)').text();
  var userEmail = currentRow.find('td:eq(2)').text();

  $('#editUserId').val(userId);
  $('#editUserName').val(userName);
  $('#editUserEmail').val(userEmail);

  $('#editUserModal').modal('show');
});

// Handle Edit User Form Submission
$('#editUserForm').submit(function(event){
  event.preventDefault();
  var userId = $('#editUserId').val();
  var userName = $('#editUserName').val();
  var userEmail = $('#editUserEmail').val();

  // Find the row to update
  $('#userTable tbody tr').each(function(){
    var currentRow = $(this);
    var currentId = currentRow.find('td:eq(0)').text();
    if(currentId == userId){
      currentRow.find('td:eq(1)').text(userName);
      currentRow.find('td:eq(2)').text(userEmail);
    }
  });

  // Hide the modal
  $('#editUserModal').modal('hide');
});

How it works:

• Clicking "Edit" grabs the current data from the row and fills in the edit modal
• When you submit, it finds the specific row using the user ID and updates the cells
• This makes sure the table shows the latest data without needing to reload the page

5.4. Delete (Remove) Operation

Goal: Let users remove data entries from the table.

Steps:

1. Add a 'Delete' Button:

<button class="btn btn-danger btn-sm delete-btn">Delete</button>

2. jQuery to Handle Delete Operation:

// Handle Delete Button Click
$(document).on('click', '.delete-btn', function(){
  if(confirm("Are you sure you want to delete this user?")){
    $(this).closest('tr').remove();
    // Optionally, re-index the ID column
    $('#userTable tbody tr').each(function(index){
      $(this).find('td:eq(0)').text(index + 1);
    });
  }
});

How it works:

• When you click "Delete", it asks if you're sure
• If you say yes, it removes that row from the table
• Then it updates the user IDs to keep everything in order

6.1. Connecting to APIs

To do CRUD operations with a backend, you'll usually work with RESTful APIs. Here's a quick rundown:

• Create: POST request to add new data
• Read: GET request to fetch data
• Update: PUT or PATCH request to change data
• Delete: DELETE request to remove data

Example: Using JSON Server for Mock APIs

JSON Server is an easy way to set up a fake REST API for testing.

1. Install it:

npm install -g json-server

2. Make a db.json file:

{
  "users": [
    { "id": 1, "name": "Jane Doe", "email": "[email protected]" }
  ]
}

3. Run JSON Server:

json-server --watch db.json

Now you've got an API at http://localhost:3000/users .

6.2. Handling Data Storage

With the backend ready, let's tweak the jQuery code to talk to the API:

Example: Creating a User with AJAX

// Handle Add User Form Submission with Backend
$('#addUserForm').submit(function(event){
  event.preventDefault();
  var name = $('#userName').val();
  var email = $('#userEmail').val();

  $.ajax({
    url: 'http://localhost:3000/users',
    method: 'POST',
    data: { name: name, email: email },
    success: function(data){
      var newRow = `
        <tr>
          <td>${data.id}</td>
          <td>${data.name}</td>
          <td>${data.email}</td>
          <td>
            <button class="btn btn-info btn-sm view-btn">View</button>
            <button class="btn btn-primary btn-sm edit-btn">Edit</button>
            <button class="btn btn-danger btn-sm delete-btn">Delete</button>
          </td>
        </tr>
      `;
      $('#userTable tbody').append(newRow);
      $('#addUserModal').modal('hide');
      $('#addUserForm')[0].reset();
    },
    error: function(){
      alert('Error adding user.');
    }
  });
});

How it works:

• When adding a user, it sends a POST request to the backend
• If it works, it adds the new user to the table with the ID from the server
• You can do similar things for Read, Update, and Delete to work with the backend

Tips:

• Always handle errors nicely to let users know if something goes wrong
• Show loading indicators so users know when stuff is happening
• Make sure your API endpoints are secure, especially with sensitive data

7.1. Form Validation and Error Handling

Make sure data is correct and handle errors nicely.

HTML5 has some built-in validation:

<input type="email" class="form-control" id="userEmail" required>

For more complex checks, use jQuery:

if(!validateEmail(email)){
  alert('Please enter a valid email address.');
  return;
}

Always give feedback when things go wrong with AJAX:

<!-- Handle Add User Form Submission with Backend -->
$.ajax({
  // ...
  error: function(jqXHR, textStatus, errorThrown){
    alert(`Error: ${textStatus}`);
  }
});

7.2. User-Friendly Interfaces

Make your design easy to use.

• Keep layouts consistent across modals and buttons
• Use clear labels for form fields and buttons
• Make sure your app works with keyboard and screen readers

7.3. Real-Time Updates and Notifications

Let users know when things happen or if there are errors.

Success messages:

alert('User added successfully!');

Or for a nicer look, use Bootstrap alerts:

$('#successAlert').show();

Loading indicators:

Show spinners while stuff is loading:

$('#loadingSpinner').show(); // To show
$('#loadingSpinner').hide(); // To hide

8.1. Efficient DOM Changes

Changing the DOM a lot can slow things down. Optimize by:

• Batch updates: Make multiple changes before adding to the DOM

var fragment = $(document.createDocumentFragment());
data.forEach(function(user){
  var row = `<tr>...</tr>`;
  fragment.append(row);
});
$('#userTable tbody').append(fragment);

• Minimize reflows: Group DOM read and write operations separately

8.2. Reducing Reflows and Repaints

• Use CSS classes instead of inline styles to reduce style recalculations
• Store jQuery selectors in variables to avoid searching the DOM repeatedly

var $tableBody = $('#userTable tbody');
$tableBody.append(newRow);

8.3. Optimizing Data Loading

• Pagination: Load and show a bit of data at a time to speed up initial loading
• Lazy loading: Load data as needed, especially for big datasets
• Virtual scrolling: Only show the part of the table that's visible, which helps with lots of data

9.1. Pagination, Sorting, and Search

Make it easier to navigate and find data.

Pagination:

Split data into manageable pages

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <!-- Page numbers -->
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <!-- More pages -->
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

Implementing pagination with jQuery:

// Example logic to show a specific number of rows per page
var rowsPerPage = 5;
var rows = $('#userTable tbody tr');
var rowCount = rows.length;
var pageCount = Math.ceil(rowCount / rowsPerPage);

// Show the first set of rows
rows.hide();
rows.slice(0, rowsPerPage).show();

// Handle pagination clicks
$('.page-link').click(function(e){
  e.preventDefault();
  var page = $(this).text();
  var start = (page - 1) * rowsPerPage;
  var end = start + rowsPerPage;
  rows.hide().slice(start, end).show();
});

Sorting:

Let users sort data by clicking table headers

$('th').click(function(){
  var table = $(this).parents('table').eq(0);
  var rows = table.find('tbody tr').toArray().sort(comparer($(this).index()));
  this.asc = !this.asc;
  if (!this.asc){rows = rows.reverse();}
  for (var i = 0; i < rows.length; i++){table.append(rows[i]);}
});

function comparer(index) {
  return function(a, b) {
    var valA = getCellValue(a, index), valB = getCellValue(b, index);
    return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB);
  }
}

function getCellValue(row, index){ return $(row).children('td').eq(index).text(); }

Searching:

Add a search bar to filter table data

<input class="form-control mb-3" id="searchInput" type="text" placeholder="Search...">

$('#searchInput').on('keyup', function(){
  var value = $(this).val().toLowerCase();
  $('#userTable tbody tr').filter(function(){
    $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  });
});

9.2. Inline Editing

Let users edit table data right in the cells.

Steps:

1. Make table cells editable:

<td class="editable">Jane Doe</td>

jQuery to handle inline editing:

// Make table cells editable on double-click
$(document).on('dblclick', '.editable', function(){
  var currentCell = $(this);
  var originalContent = currentCell.text();
  var input = $('', {
    type: 'text',
    value: originalContent,
    class: 'form-control'
  });
  currentCell.html(input);
  input.focus();

  // Handle input blur (loss of focus)
  input.blur(function(){
    var newContent = $(this).val();
    currentCell.text(newContent);
    // Optionally, send update to backend here
  });
});

How it works:

• Double-clicking a cell turns it into an input field
• When you click away, it saves the new content back to the cell
• This makes editing super smooth without needing separate modals

9.3. Role-Based Access

Control who can do what based on user roles.

Scenario:

• Admin: Can do everything
• Editor: Can create and update but not delete
• Viewer: Can only view

Steps:

1. Define user roles:

   This should be handled by your backend and login system

2. Control UI elements:

   Use jQuery to show or hide buttons based on the user's role

   var userRole = 'admin'; // This should come from your authentication system
   
   if(userRole === 'viewer'){
     $('.edit-btn, .delete-btn').hide();
   } else if(userRole === 'editor'){
     $('.delete-btn').hide();
   }
   

3. Backend validation:

   Make sure your backend also checks permissions to prevent unauthorized actions

10.1. Modal Not Opening

Problem: Clicking "Add User" doesn't show the modal.

Fix:

• Make sure Bootstrap JS is included after jQuery
• Check that the data-bs-target and id attributes match
• Look for JavaScript errors in the browser's console

10.2. Event Handlers Not Working on New Rows

Problem: "Edit" or "Delete" buttons on new rows don't work when clicked.

Fix:

Use event delegation instead of binding directly to elements:

$(document).on('click', '.edit-btn', function(){
  // Handler code
});

10.3. Data Disappearing After Refresh

Problem: Added users vanish when you reload the page.

Fix:

• If you're just changing the DOM, data won't stick around
• Use AJAX to send and get data from a backend or mock server
• For simpler apps, you could use localStorage to save data on the client side

10.4. Table Looks Weird on Mobile

Problem: Table layout breaks on small screens.

Fix:

• Make sure you're using the .table-responsive wrapper
• Consider hiding less important columns on small screens using Bootstrap's responsive utilities
• Test on different devices and adjust as needed

11.1. Modern JS Frameworks vs jQuery

While jQuery is still popular and easy to use, modern frameworks like React, Vue, and Angular offer more structured ways to build apps.

Things to consider:

• Project size: For small projects, jQuery is fine. For bigger apps, frameworks might be better for managing complexity.
• Learning curve: Modern frameworks can be harder to learn but offer long-term benefits.
• Performance: Frameworks often handle large datasets and complex interactions better.

Best practice:

Think about what your project needs. If you think it'll grow and get complex, it might be worth learning a modern framework.

11.2. When to Use Bootstrap Tables

Advantages of Bootstrap tables:

• Responsive design: Automatically adjusts to different screen sizes
• Pre-made styles: Looks professional with minimal effort
• Easy to customize: You can extend it with your own CSS

Best practices:

• Don't overcomplicate: Use Bootstrap's classes without adding too much custom stuff to keep it fast
• Make it accessible: Use semantic HTML and ARIA attributes where needed
• Combine with plugins: For advanced features like pagination and sorting, use Bootstrap-compatible plugins or mix with frameworks

11.3. Writing Maintainable Code

As projects grow, keeping code organized becomes super important.

Strategies:

• Break code into reusable functions or modules
• Use clear and consistent names for variables and functions
• Comment your code to explain tricky parts
• Use version control (like Git) to track changes and work with others
• Test your code to make sure it works reliably