Блог

Это веб-приложение, использующее Django в качестве бэкенда, Vue.js в качестве интерфейса.

Я использовал Vue.js чтобы создать страницу, включая таблицу. Мне действительно нужен jquery datatable здесь для разбиения на страницы, так как в таблице много данных.

Но загрузка занимает много времени, и таблица, кажется, отображается дважды(в первый раз отображается обычная таблица, затем Vue.js таблица показывает).

Как я мог бы сократить время загрузки таблицы, позволив таблице отображать окончательные результаты вместо двойной загрузки?

     <div id="app">
    <br>
    <p></p>
    <form  ref="form" id="myform" method="post" action="/tag_course/">
        <table id="myTable">
            <thead>
            <tr>
                <th>Author/Editor</th>                   
            </tr>
            </thead>
            <tbody>
            <tr v-for="(row, index) in filteredRows" :key="`isbn-${index}`">               
                <td v-html="highlightMatches(row.author)">{{ row.author }}</td>                 
                <td><button type="button" class="button2" v-on:click="check( $event, row.title)">Tag amp; Submit</button></td>
            </tr>
            </tbody>
        </table>
    </form>
</div>

    <script>
    Vue.prototype.$http = axios;
    $(document).ready(function() {
        $('#myTable').DataTable({info: false, bLengthChange: false});
        $(".dataTables_filter input").attr("placeholder", "By title, iSBN, VBID, publisher, Author");
    } );

    var query_results_book = {{ query_results_book_json|safe}};
    var book_rows = [{author: query_results_book[0].fields.author}];

    for (var i=1; i < query_results_book.length; i  = 1){
       author: query_results_book[i].fields.author});
    }

    const app = new Vue({
        el: '#app',
        data:() => ({
            filter: '',
            rows: book_rows
        }),

        methods: {
            highlightMatches(text)
            {
                if (typeof text === 'string' || text instanceof String){
                    text = (text?text:'None');
                    const matchExists = text.toLowerCase().includes(this.filter.toLowerCase());
                    if (!matchExists) return text;
                    const re = new RegExp(this.filter, 'ig');
                    return text.replace(re, matchedText => `<strong>${matchedText}</strong>`);
                }
            },
            submit : function(){
                this.$refs.form.submit()
            },            

                      
        computed: {
            filteredRows() {
                return this.rows.filter(row => {
                    const author = String(row.author).toString().toLowerCase();
                    const title = String(row.title).toLowerCase();
                    const searchTerm = this.filter.toLowerCase();
                    return title.includes(searchTerm) ||
                        author.includes(searchTerm);
                });
            }
        },
    });