如何通过 JavaScript 对 html bootstrap DataTable 中的 firestore 数据进行排序？答案

【问题标题】：how to sort firestore data in html bootstrap DataTable through JavaScript?如何通过 JavaScript 对 html bootstrap DataTable 中的 firestore 数据进行排序？
【发布时间】：2020-12-07 10:49:04
【问题描述】：

我从 firebase 获取云存储的数据，它也成功了，但它没有排序。当我获取静态数据时，它就完成了工作，我不明白我的错误在哪里，我尝试更多次来解决这个问题，但无法解决，请有人帮助我..

提前谢谢你:)

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

        var firebaseConfig = {
            apiKey: "",
            authDomain: "",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: "",
            measurementId: ""
        };
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();
        const booksRef = firebase.firestore().collection("JSDATA");
         booksRef.get().then(function (querySnapshot){
                querySnapshot.forEach(function (doc) {
                   document.getElementById("myTable1").innerHTML += "<tbody> <tr> <td>" + doc.data().Email  + "</td> <td>" +  doc.data().Password + "</td> </tr> </tbody>"                
                    console.log(doc.data().Email);
                });
            });
       
 
        console.log("hii");
        booksRef.get().then((snapshot) => {
            const data = snapshot.docs.map((doc) => ({
              id: doc.id,
              ...doc.data(),
            }));
            console.log("All data in 'books' collection", data);
            // const userdata = document.querySelector("#myTable1");
           
            // [ { id: 'glMeZvPpTN1Ah31sKcnj', title: 'The Great Gatsby' } ] 
          });
    </script>

<html>
<head>
    <title>Frestore Data</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FireStore Data</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-analytics.js"></script>
</head>
<body>
    <div class="container">
        <table class="table table-striped table-bordered" id="myTable1">
            <thead>
                <tr>
                    <!-- <th class="th-sm" scope="col">Sr.No</th> -->
                    <th class="th-sm" scope="col">Email</th>
                    <th class="th-sm" scope="col">Password</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!-- <td></td> -->
                    <td></td>
                    <td></td>
                </tr>

            </tbody>
        </table>
    </div>
</body>
</html>

在这张图片中，数据是 Firestore 的，它没有排序..

使用静态数据，它运行完美..

【问题讨论】：

您要在哪个字段上排序？电子邮件？
不是任何单个字段我想对所有字段进行排序，例如datatables.net

标签： javascript html firebase google-cloud-firestore

【解决方案1】：

默认情况下，Firestore 查询不会根据特定字段进行排序。如果您想按电子邮件排序（排序依据），您需要按如下方式调整您的查询：

    const booksRef = firebase.firestore().collection("JSDATA").orderBy("Email");
     booksRef.get().then(function (querySnapshot){

更多详情请关注doc。

请注意，“orderBy() 子句还过滤给定字段的存在。结果集将不包括不包含给定字段的文档。”

【讨论】：

我已经尝试过了，但我不想那样，我想要datatables.net
这要复杂得多：要么你使用一个表格库（但如果你想在前端分页，你需要下载所有数据）或者你自己开发排序和分页功能。相应的查询。见firebase.google.com/docs/firestore/query-data/query-cursors
ohh noo...其中使用了orderBy，我不想使用它，我想当我点击电子邮件选项卡时，它会像我发送的链接一样自动排序..

【解决方案2】：

如果我理解正确，您希望对表格进行排序，允许用户单击头部单元格并按此排序。如果是这样，我做了类似的事情：

getClientsPaginated({ companyId, order, limit = null, startAt = null, endAt = null, searchByTerm = null }) {
    return new Promise((resolve, reject) => {
        const query = (ref) => {
            if (searchByTerm) {
                ref = ref.where(order['field'], '==', searchByTerm);
            } else {
                ref = ref.orderBy(order['field'], order['direction']);
            }

            if (startAt) ref = ref.startAfter(startAt);
            if (endAt) ref = ref.endBefore(endAt);

            if (limit) {
                if (!endAt) {
                    ref = ref.limit(limit);
                } else {
                    ref = ref.limitToLast(limit);
                }
            }

            return ref;
        };

        this.db.collection('your_collection', query)
            .get().pipe(take(1)).subscribe((clients) => {
                <rest of your code here>
            });
    });
}

所以问题是，在标题单元格上的点击事件上，您会触发查询数据库的函数，传递带有参数的对象（在这种情况下），如下所示：

const parameters = {
    companyId: companyId,
    order: queryOrder,
    limit: Number(limit),
    startAt: next,
    endAt: previous,
    searchByTerm: term
};

getClientsPaginated(parameters)

我希望这能有所帮助。

【讨论】：

【解决方案3】：

现在它正在通过下面的代码工作..

非常感谢..

 var firebaseConfig = {
           apiKey: "",
            authDomain: "",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: "",
            measurementId: 
        };
        firebase.initializeApp(firebaseConfig);
        firebase.analytics();

        const booksRef = firebase.firestore().collection("JSDATA");
        var srno = 0;

        
 
         booksRef.get().then(function (querySnapshot){
                querySnapshot.forEach(function (doc) {
                    srno++;
                    document.getElementById("myTable1").getElementsByTagName('tbody')[0].innerHTML += "<tr><td>" + srno + "</td><td>" + doc.data().Email  + "</td> <td>" +  doc.data().Password + "</td></tr>";
                     // console.log(aa);
                       
                });
                $(document).ready(function() {
                    $('#myTable1').DataTable();
                });
                
            });

<!DOCTYPE html>
<html>
<head>
    <title>Frestore Data</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FireStore Data</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
    integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
    
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-analytics.js"></script>
</head>
<body>
    <div class="container" id="data">
        <table class="table table-striped table-bordered" id="myTable1">
            <thead>
                <tr>
                    <th class="th-sm" scope="col">Sr.No</th>
                    <th class="th-sm" scope="col">Email</th>
                    <th class="th-sm" scope="col">Password</th>
                </tr>
            </thead>
            <tbody>
                
            </tbody>
        </table>
    </div>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</body>

</html>

【讨论】：

【解决方案4】：

通过这种方式获取数据时，您可以在 Firestore 中进行排序-

booksRef.orderBy('the_fieldname_that_you_want_to_order_by').get()
// if you want to sort in decending order then
booksRef.orderBy('the_fieldname_that_you_want_to_order_by', 'desc').get()

【讨论】：

您好 Nawaz，因此不鼓励仅使用代码的答案。如果您编辑您的答案并解释您的解决方案如何工作以及为什么工作，我会很有帮助。干杯！