bootstrap-table pageList失效

Posted 2023-04-09

使用bootstrap-table插件时其余的都正常，但是加入pageList不会显示效果，想问一下大家知道什么原因吗

以下是JS代码$(\'#tb_departments\').bootstrapTable(
url: MNG_DOMAIN + "/admin/v1/role/page/query.do", //请求后台的URL（*）
classes: "table table-hover",
dataType: "json",
method: \'post\', //请求方式（*）
toolbar: \'#toolbar\', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "desc", //排序方式
queryParams: queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "roleNo", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
responseHandler: handel,
idField: "roleNo",
columns: [
checkbox: true
,
field: \'roleNo\',
title: \'角色编号\',
sorttable: true
,
field: "roleNm",
title: "角色名称",
sorttable: true
],
silent: true, //刷新事件必须设置
formatLoadingMessage: function ()
return "请稍等，正在加载中...";
,
formatNoMatches: function () //没有匹配的结果
return \'无符合条件的记录\';
,
onLoadError: function (data)
$(\'#reportTable\').bootstrapTable(\'removeAll\');

); 参考技术A 添加这个属性 smartDisplay:false,

Bootstrap-table 使用 Firebase 实时数据库显示“No matching records found”和 bootstrap-table 中的记录

【中文标题】Bootstrap-table 使用 Firebase 实时数据库显示“No matching records found”和 bootstrap-table 中的记录

【英文标题】：Bootstrap-table displays both "No matching records found" and Records in bootstrap-table with Firebase realtime database

【发布时间】：2021-07-30 10:55:01

【问题描述】：

我正在使用 bootstrap-table 并尝试显示一个包含来自 firebase 实时数据库的数据的表。

数据库的内容正确呈现，但是我也在我的表中看到“未找到匹配的记录”消息。

使用搜索和排序功能还可以完全清除表格，并且需要刷新才能恢复数据。

import React,  useState, useEffect  from "react";
import firebaseDb from "../firebase";

const StarTrekTable = () => 
  var [contactObjects, setObjects] = useState();

  useEffect(() => 
    firebaseDb.child("unwatched").on("value", (snapshot) => 
      if (snapshot.val() != null)
        setObjects(
          ...snapshot.val(),
        );
    );
  , []);

  return (
    <>
      <div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display -4 text-center">Star trek series</h1>
        </div>
      </div>
      <div>
        <div className="col-md-12">
          <table data-toggle="table" data-pagination="true" data-search="true">
            <thead className="thread-light">
              <tr>
                <th>Title</th>
                <th>Series</th>
                <th>Season</th>
                <th>Episode</th>
                <th>Stardate</th>
                <th>Air Date</th>
              </tr>
            </thead>
            <tbody>
              Object.keys(contactObjects).map((id) => 
                return (
                  <tr>
                    <td>contactObjects[id].title</td>
                    <td>contactObjects[id].series</td>
                    <td>contactObjects[id].season</td>
                    <td>contactObjects[id].episode</td>
                    <td>contactObjects[id].stardate</td>
                    <td>contactObjects[id].airdate</td>
                  </tr>
                );
              )
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
;

export default StarTrekTable;

非常感谢任何帮助。

Table shows both records as expected and "No matching records found"

Image of my Firebase realtime database setup

【参考方案1】：

在您的组件第一次渲染时，您的contactsObject 是，这导致<tbody> 在第一次渲染时为空。在代码的其他地方，可能在引导程序的某个地方，“未找到匹配的记录”被添加到源代码中。一旦您的听众找到未观看的剧集，下载、解析并将它们添加到 <tbody> 反应中，然后删除它添加的条目（无），然后插入新条目。因为“没有找到匹配的记录”是在 React 之外添加的，所以它不知道它在那里并且没有被删除。不要让任何其他代码添加此行，而是在您仍在加载数据或表为空时自行定义。

如果你还没有使用 react-bootstrap，你应该使用它，这样与 Bootstrap 捆绑的原始 JavaScript 就不会像你在这里看到的那样与 React 争夺控制权。

注意：在 React 中渲染数据数组时，请确保为每个条目指定 key，以便 React 可以在新渲染时有效地操作条目。

清理一些其他的东西，这给出了：

import React,  useState, useEffect  from "react";
import firebaseDb from "../firebase";

const StarTrekTable = () => 
  // - renamed variables to reflect content
  // - used array instead of object
  // - used const instead of var
  const [episodeData, setEpisodeData] = useState([]);
  const [episodesLoaded, setEpisodesLoaded] = useState(false);

  useEffect(() => 
    // store Reference for attaching and detaching listeners
    const unwatchedRef = firebaseDb.child("unwatched");
  
    // because you use a `.on` listener, don't forget to store
    // the listener so we can detach it
    const listener = unwatchedRef
      .on("value", (snapshot) => 
        if (!snapshot.exists()) 
          // no data to show and/or unwatched is empty
          // update state variables
          setEpisodeData([]);
          setEpisodesLoaded(true);
          return;
        
        
        // Use forEach to maintain the order of the query, using `...snapshot.val()`
        // for the whole result will often lead to unexpected results.
        const freshEpisodeData = [];
        snapshot.forEach((childSnapshot) => 
          freshEpisodeData.push( ...childSnapshot.val(), key: childSnapshot.key );
        );

        // update state variables
        setEpisodeData(freshEpisodeData);
        setEpisodesLoaded(true);
      );
      
    // when component is detached, remove the listener
    return () => unwatchedRef.off("value", listener);
  , []);

  return (
    <>
      <div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display -4 text-center">Star trek series</h1>
        </div>
      </div>
      <div>
        <div className="col-md-12">
          <table data-toggle="table" data-pagination="true" data-search="true">
            <thead className="thread-light">
              <tr>
                <th>Title</th>
                <th>Series</th>
                <th>Season</th>
                <th>Episode</th>
                <th>Stardate</th>
                <th>Air Date</th>
              </tr>
            </thead>
            <tbody>
               !episodesLoaded
                ? (
                  <tr key="data-loading">
                    <td colspan="6"><i>Loading...</i></td>
                  </tr>
                )
                : (episodeData.length === 0
                  ? (
                    <tr key="data-empty">
                      <td colspan="6">No unwatched episodes available. You're all caught up!</td>
                    </tr>
                  )
                  : episodeData.map(( key, title, series, season, episode, stardate, airdate ) => (
                    <tr key=key>
                      <td>title</td>
                      <td>series</td>
                      <td>season</td>
                      <td>episode</td>
                      <td>stardate</td>
                      <td>airdate</td>
                    </tr>
                  )))
              
            </tbody>
          </table>
        </div>
      </div>
    </>
  );
;

export default StarTrekTable;

注意：对于不太可能更改的静态数组，您的数据库结构很好，但我强烈建议您不要对数据使用数字键（0、2 等。 ) 而是使用其他东西，例如（S01E01-02、S01E03 等）或 Firebase 推送 ID。考虑这个（但仍然有效）blog post 进行推理。