How to initiate searchpanes extension in vue component ??

How to initiate searchpanes extension in vue component ??

drilldrill Posts: 12Questions: 5Answers: 0
edited August 2021 in SearchPanes

Hello guys, new to datatables, I am working by integrating datatables-net-bs4 into my vue application. however I am unable to initiate the searchpanes extension to add it to my table. below is the script part of my vue component. could you give me some advice.


This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    This example shows how to use SearchPanes with Buttons. You need to add P to your dom option.

    Kevin

  • drilldrill Posts: 12Questions: 5Answers: 0

    Yes i try it, but not working

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    Did you install the SearchPanes JS and CSS?

    Do you get errors in the browser's console?

    Does the Datatable initialize properly but not displaying the search panes?

    Can you post a link to your page or a test case repliacting the issue so we can help debug?
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • drilldrill Posts: 12Questions: 5Answers: 0

    yes i installed searchpanes via npm. then I imported the corresponding css and js files of the searchpanes and select extensions into the app.js file of the project. when I activate the import of select in the app.js file of the project, my buttons disappear. I add P in the DOM nothing at all happens on the page.

  • drilldrill Posts: 12Questions: 5Answers: 0

    I looked at the test case, but the structure is completely different, I don't know how to provide a test case

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    when I activate the import of select in the app.js file of the project, my buttons disappear.

    That doesn't sound right. There must be some other issue. Do you still have the B in your dom option?

    I add P in the DOM nothing at all happens on the page.

    Nothing? Do you get errors in the browser's console. As I asked before please provide a link to your page or a test case so we can help debug. If you don't want to provide the link here you can PM the developers directly (@allan or @colin) to coordinate help from them.

    Kevin

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @drill ,

    It also looks like you are only importing the styling integration files into your app.js file. You should also import the files from datatables.net-searchpanes. The same will go for the other extensions and the core as well.

    Thanks,
    Sandy

  • drilldrill Posts: 12Questions: 5Answers: 0

    hi @sandy and @kthorngren thank you, I solved the problem, in short I know if it was a conflict between boostrap installed in my Devdependecies and that of datatables-bs. I installed datatable.net-dt and uploaded the js and css files of the searchpanes-dt extension into the app.js; it is functioning normally. but the buttons (excel, pdf and column visibility) are not showing i am seeing what is wrong with the js and css files..

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    Do you still have the B in your dom option? Please post your current Datatables init code.

    Kevin

  • drilldrill Posts: 12Questions: 5Answers: 0

    methods :{
    Welltable(){
    this.$nextTick(() => {
    $('#sampleTable').DataTable({
    select: true,
    dom: 'QBlfrtip',
    columnDefs: [
    {
    searchPanes: {
    show: true
    },
    targets: [3, 4, 5, 6, 7]
    }
    ],
    buttons: [
    'searchPanes',
    {
    extend: 'colvis',
    text: '<i class="fas fa-eye-slash"> Column visibility </i>',
    titleAttr: 'Show/Hide column',
    className: 'btn btn-sm btn-secondary'
    },

    },

  • drilldrill Posts: 12Questions: 5Answers: 0

    @kthorngren i still have B in my dom option. Excel and Print work normally but i have an error when i install pdfmake by npm

    npm ERR! path C:\Users.....\node_modules.bin\acorn.cmd
    npm ERR! code EEXIST
    npm ERR! Refusing to delete C:\Users....\node_modules.bin\acorn.cmd: is outside C:\Users....\node_modules\acorn and not a link
    npm ERR! File exists: C:\Users...\node_modules.bin\acorn.cmd
    npm ERR! Move it away, and try again.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    That doesn't sound like a DataTables issue - it sounds like a problem with a different package. It would be worth looking or posting on StackOverlow for that,

    Colin

Sign In or Register to comment.