技术问询：如何修改jQuery DataTable分页、搜索及记录数的CSS样式

Hey there! Let's walk through how to tweak the CSS for the pagination controls, search box, and record count area in your DataTables setup. Even though you're using the older aaData/aoColumns syntax, the core CSS class names DataTables uses haven't changed—so these styles will work perfectly for your table.

1. Customizing the Search Box #

The search box lives inside the .dataTables_filter container. You can target the container itself and the input field to adjust spacing, colors, and dimensions:

/* Target the search box container */
#companies_wrapper .dataTables_filter {
  /* Adjust position, margin, or width */
  margin-bottom: 15px;
  width: 50%;
  float: right;
}

/* Target the search input field */
#companies_wrapper .dataTables_filter input[type="search"] {
  width: 250px; /* Set custom width */
  height: 36px; /* Adjust height */
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #333; /* Text color */
  background-color: #f8f9fa; /* Background color */
}

/* Hover/focus states for the input */
#companies_wrapper .dataTables_filter input[type="search"]:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

2. Styling the Record Count Display #

The record count (like "Showing 1 to 10 of 50 entries") is in the .dataTables_info container. Here's how to adjust its appearance:

#companies_wrapper .dataTables_info {
  color: #666; /* Text color */
  font-size: 14px;
  margin-top: 10px;
  /* Adjust position if needed */
  float: left;
}

3. Customizing Pagination Controls #

Pagination buttons are in the .dataTables_paginate container, with individual buttons using the .paginate_button class. You can style default, active, and disabled states:

/* Target the pagination container */
#companies_wrapper .dataTables_paginate {
  margin-top: 10px;
  float: right;
}

/* Style individual pagination buttons */
#companies_wrapper .dataTables_paginate .paginate_button {
  padding: 6px 12px;
  margin: 0 2px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #007bff;
  background-color: #fff;
  text-decoration: none;
}

/* Hover state for buttons */
#companies_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #e9ecef;
  border-color: #adb5bd;
}

/* Active (current page) button style */
#companies_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}

/* Disabled button style */
#companies_wrapper .dataTables_paginate .paginate_button.disabled {
  color: #6c757d;
  background-color: #fff;
  border-color: #ddd;
  cursor: not-allowed;
}

Pro Tip #

Using your table's ID (#companies_wrapper) as a parent selector ensures these styles only apply to your specific table, not any other DataTables on the page. If you want global styles for all tables, just remove the #companies_wrapper prefix.

Just add these CSS rules to your stylesheet, and you can tweak the values (colors, sizes, margins) to match your design system!

内容的提问来源于stack exchange，提问作者Sikandar Sahab