亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何通過JavaScript對html bootstrap DataTable中的firestore

如何通過JavaScript對html bootstrap DataTable中的firestore

翻過高山走不出你 2023-10-20 16:17:01
我從 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>在此圖像中，數據是 firestore 的，它沒有排序。使用靜態數據它運行完美..
查看完整描述

4 回答

?
慕容708150

TA貢獻1831條經驗 獲得超4個贊

現在它正在通過下面的代碼工作..


太感謝了..


 var firebaseConfig = {

           apiKey: "",

            authDomain: "",

            databaseURL: "",

            projectId: "",

            storageBucket: "",

            messagingSenderId: "",

            appId: "",

            measurementId: 

        };

        firebase.initializeApp(firebaseConfig);

        firebase.analytics();


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

        var srno = 0;

https://img1.sycdn.imooc.com/6532387a0001c99c11540600.jpg

        

 

         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>


查看完整回答
反對 回復 2023-10-20
?
米脂

TA貢獻1836條經驗 獲得超3個贊

默認情況下，Firestore 查詢不根據特定字段進行排序。如果您想按電子郵件排序（排序依據），則需要按如下方式調整查詢：

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

請注意，“orderBy()子句還會過濾是否存在給定字段。結果集將不包括不包含給定字段的文檔?！?/p>


查看完整回答
反對 回復 2023-10-20
?
嚕嚕噠

TA貢獻1784條經驗 獲得超7個贊

如果我理解正確的話，您想要對表格進行排序，允許用戶單擊頭部單元格并按該順序進行排序。如果是這樣，我做了類似的事情：


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)

我希望這能有所幫助。


查看完整回答
反對 回復 2023-10-20
?
泛舟湖上清波郎朗

TA貢獻1818條經驗 獲得超3個贊

當以這種方式獲取數據時，您可以在 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()


查看完整回答
反對 回復 2023-10-20
  • 4 回答
  • 0 關注
  • 184 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號