Got it, let's break down how to set up your bootstrap-table dynamically when pulling columns and data from your Hybris server—since the number of columns can change, we need a flexible approach that adapts to whatever the server sends over.

Step 1: Structure Your Hybris Server Response #

First, make sure your Hybris endpoint returns data that includes both column definitions and table rows. A clean, compatible format would be a JSON object with two key parts:

• columns: An array matching bootstrap-table's column configuration format
• data: The actual row data, where each object's keys map to the field values in the columns array

Example server response:

{
  "columns": [
    { "field": "", "checkbox": true }, // Keep your fixed checkbox column if needed
    { "field": "status", "title": "Book Name" },
    { "field": "author", "title": "Author" }, // Dynamic new column
    { "field": "publishDate", "title": "Publish Date" } // Another dynamic column
  ],
  "data": [
    { "status": "Available", "author": "J.K. Rowling", "publishDate": "1997-06-26" },
    { "status": "Out of Stock", "author": "George Orwell", "publishDate": "1949-06-08" }
  ]
}

Step 2: Dynamically Initialize or Update the Table #

You’ll have two common scenarios here—either setting up a new table, or refreshing an existing one with new columns/data.

Scenario 1: Initialize a Brand New Table #

Use the server’s response directly to bootstrap your table:

// Fetch data from your Hybris server
$.ajax({
  url: '/your-hybris-api-endpoint', // Replace with your actual API path
  method: 'GET',
  success: function(serverResponse) {
    $('#table').bootstrapTable({
      columns: serverResponse.columns,
      data: serverResponse.data,
      // Add any extra bootstrap-table features you need
      pagination: true,
      search: true,
      striped: true
    });
  },
  error: function(err) {
    console.log('Oops, failed to load data:', err);
  }
});

Scenario 2: Refresh an Existing Table #

If the table is already rendered and you need to update it with new columns/data, use bootstrap-table’s refreshOptions method—no need to destroy and reinitialize the table:

$.ajax({
  url: '/your-hybris-api-endpoint',
  method: 'GET',
  success: function(serverResponse) {
    $('#table').bootstrapTable('refreshOptions', {
      columns: serverResponse.columns,
      data: serverResponse.data
    });
  }
});

Step 3: Optional - Tweak Columns Before Rendering #

If Hybris returns raw field names that don’t match your desired display titles, or you need to format values (like dates), process the columns array before passing it to bootstrap-table:

$.ajax({
  url: '/your-hybris-api-endpoint',
  method: 'GET',
  success: function(serverResponse) {
    // Adjust columns to add custom titles or value formatters
    const adjustedColumns = serverResponse.columns.map(col => {
      const columnConfig = {
        field: col.field,
        title: col.displayTitle || col.field // Fallback to field name if no title is provided
      };

      // Add a formatter for date fields, for example
      if (col.field === 'publishDate') {
        columnConfig.formatter = function(value) {
          return new Date(value).toLocaleDateString();
        };
      }

      return columnConfig;
    });

    // Add your fixed checkbox column at the start if needed
    adjustedColumns.unshift({ field: "", checkbox: true });

    // Initialize or update the table with adjusted columns
    $('#table').bootstrapTable({
      columns: adjustedColumns,
      data: serverResponse.data
    });
  }
});

Quick Tips to Avoid Headaches #

• Double-check that your Hybris server returns column objects with at minimum a field (matching data keys) and title (header text).
• If you need fixed columns (like the checkbox), manually add them to the columns array before passing it to bootstrap-table.
• The refreshOptions method resets table state (like sorting or filters)—if you need to preserve state, you’ll have to save and restore it manually.

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