Creating a datatable with Laravel and InertiaJS

แชร์
ฝัง
  • เผยแพร่เมื่อ 14 พ.ย. 2024

ความคิดเห็น • 53

  • @nicolastorgato9387
    @nicolastorgato9387 3 ปีที่แล้ว +4

    Hi Constantin, first off thanks for the video!
    I got a problem with the search. So, as soon as I type in the search field, the list gets filtered correctely. So far so good.
    The problem is when I delete what I wrote in the search. When I delete the letters I wrote, the list is not filtered anymore, it just shows the previous results but it doesn't get updated.
    Example: if the letters I write doesn't match with any title in the list, the list stays empty, even tough I delete the letters in the search field.
    IMPORTANT: when I write in the search field, I receive these two errors in the console:
    - TypeError: Cannot read property 'insertBefore' of null
    - TypeError: Cannot read property 'emitsOptions' of null
    I followed all your steps, what could be the problem? Thanks so much!

    • @cdruc
      @cdruc  3 ปีที่แล้ว +2

      Hi Nicola,
      I'm glad you liked the video!
      Regarding your problem, I'm 99% it's because of vue.
      The project in the video has vue@3.0.10 installed.
      I've upgraded it to the latest version and I'm getting the exact same error you're getting.
      Soo.... temporary fix: downgrade vue and @vue/compiler-sfc to 3.0.10
      ```
      // package.json
      "@vue/compiler-sfc": "3.0.10",
      "vue": "3.0.10",
      ```
      npm update && npm run dev/watch

    • @nicxla.s
      @nicxla.s 3 ปีที่แล้ว +1

      @@cdruc thank you so much! It's a relief that I'm not the only one to have this problem. But wait, I have "3.0.5" version for both vue and the compiler. Which version should I downgrade to?

    • @cdruc
      @cdruc  3 ปีที่แล้ว +1

      Hmm..
      Are you sure you're on the 3.0.5 version?
      You might have ^3.0.5 in package.json, but that instructs npm to install the latest version up to (but not included) 4.0.0.
      So if you have ^3.0.5 in your package.json and run the npm install, it will grab the latest available version that fits those constraints - which, at this moment, is 3.0.11
      To check the exact version you are on, open the package-lock.json file and search for: node_modules/vue
      ----
      To "force" npm to install a specific version, enter the exact version without any other sign in front (so no caret or tilde).

    • @nicxla.s
      @nicxla.s 3 ปีที่แล้ว

      @@cdruc it's exactly as you're saying, I'm actually on 3.0.11 at the moment...Alright, then I will try to downgrade!
      But as you said, this is a temporary solution, what about a solution that works with any version?
      I mean, I don't understand why in the latest available version it doesn't work, giving me those stupid and incomprehensible errors...

    • @elivalderramaarmas3502
      @elivalderramaarmas3502 3 ปีที่แล้ว

      @@nicxla.s
      friend, did you manage to solve I have the same error?

  • @floresrosalinojr.2143
    @floresrosalinojr.2143 ปีที่แล้ว

    i always find the solution i want in your channel whenever i encounter a problem.. great content sir, thank you!

  • @gangadhardarsi
    @gangadhardarsi 3 ปีที่แล้ว +3

    Bro , even I did Almost the same way in my projects ( ofcourse after watching your previous videos ) .. now I got few more tips to improve my code especially validation .. as usual professional work 👍👍👍

  • @janowlubelski
    @janowlubelski 3 ปีที่แล้ว +2

    It's worth to mention that we should add ->withQueryString() to the controller action so the paging works with the query params. Good video!

    • @timholder4554
      @timholder4554 2 ปีที่แล้ว

      Great hint! May I ask where do you exactly add it to? Thanks in advance!

  • @fabianesteban5002
    @fabianesteban5002 3 ปีที่แล้ว +2

    Very well explained, simple and concrete. Thanks!

  • @nabeelyousafpasha
    @nabeelyousafpasha ปีที่แล้ว

    Love your elaboration. Respect from Pakistan

  • @PabloLopez-rm6sj
    @PabloLopez-rm6sj ปีที่แล้ว +1

    this video save me sooo much time!!! thank you so much. Trying to learn to convert this to setup script

    • @cdruc
      @cdruc  ปีที่แล้ว

      glad you found it helpful!

  • @MrLinuxFreak
    @MrLinuxFreak 3 ปีที่แล้ว +1

    looks really good, loved the video

    • @cdruc
      @cdruc  3 ปีที่แล้ว

      Glad you liked it!

  • @fareezk
    @fareezk 3 ปีที่แล้ว +1

    Really a good one.. Convinces me to try inertia

  • @pradeepspace3
    @pradeepspace3 3 ปีที่แล้ว +4

    Another great video 😊👏

    • @cdruc
      @cdruc  3 ปีที่แล้ว

      Thank you 🤗

  • @AshokKumarwwwHarshitdalalcom
    @AshokKumarwwwHarshitdalalcom 3 ปีที่แล้ว +1

    Thank for InertiaJS video : Ashok Kumar - INDIA

  • @iamx9506
    @iamx9506 2 ปีที่แล้ว

    Thanks a lot, works like charms

  • @AmaroAmaral
    @AmaroAmaral 3 ปีที่แล้ว +1

    What about adding a select with preset number of records to update the query (5, 10 15) ! That would complete this video :)! Thank you very much for this video!

  • @shafqatalinawaz3868
    @shafqatalinawaz3868 ปีที่แล้ว

    Excellent work

  • @thomasiseli7272
    @thomasiseli7272 3 ปีที่แล้ว +1

    Great Video, everything worked as expected! I have a problem regarding the filters prop, which I don't understand. As soon as I set the initial value of the params, I get the following error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'filters'). I have the same code as you, and when I console log the filters-object I get the values just as expected... Do you know anything about this behaviour?

    • @thomasiseli7272
      @thomasiseli7272 3 ปีที่แล้ว +1

      For your information, my issue was solved. The problem was, that I used an arrow function for data. Changing the arrow function to ES6 notation solved the issue. Thanks anyway and keep up the great work!

  • @LebaneseNostalgia
    @LebaneseNostalgia 2 ปีที่แล้ว

    Any idea how we can preserve the pagination param when we sort the list?
    Thanks for the video very helpful!

  • @sohelmia1999
    @sohelmia1999 3 ปีที่แล้ว +1

    Great work bro.

  • @MuhammadKhalilZarpio
    @MuhammadKhalilZarpio 3 ปีที่แล้ว

    Great explanation, can you please guide us, how can we protect/hide real table column names. If I don't want to public my schema in the query string.

    • @cdruc
      @cdruc  3 ปีที่แล้ว +1

      Thanks, I'm glad you found the video helpful!
      If you worry about showing the real DB columns, a solution would be to use an array to map the fields coming from the request to the actual columns of your database - similarly to a dictionary.
      Eg:
      $columns = [
      'randomNameThatIsntTheActualColumnName' => 'name',
      'randomCity' => 'city',
      'randomPostcode' => 'postcode',
      ];
      if (request()->has(['field', 'direction'])) {
      $query->orderBy($columns[request('field')], request('direction'));
      }
      So the key `randomCity` can be anything you want. But then you match that with an actual column name only your Controller knows.

  • @Raihan004
    @Raihan004 2 ปีที่แล้ว +1

    good one
    thank you

  • @robertomejia3124
    @robertomejia3124 ปีที่แล้ว

    could yo please...please...PLEASEEEEEEEEE
    record a new video about this, but using COMPOSITION API ?

  • @MaraWithMe
    @MaraWithMe 3 ปีที่แล้ว +2

    Another great tutorial! Thank you very much

    • @cdruc
      @cdruc  3 ปีที่แล้ว +1

      Glad you liked it!

  • @danangponorogo166
    @danangponorogo166 3 ปีที่แล้ว

    Instead using get request, can we use post request to processing the search ? I rather like url stay clean from search keyword while searching.

  • @fredrickboaz
    @fredrickboaz 2 ปีที่แล้ว +1

    how would you handle this in composition api vue 3?

    • @cdruc
      @cdruc  2 ปีที่แล้ว +1

      pretty much the same. apart from using the new composition functions 🤷‍♂️ - maybe I'll recreate the video using vue3 sometimes in the future

  • @ahmadrio
    @ahmadrio 3 ปีที่แล้ว +1

    terima kasih

  • @antony007456
    @antony007456 3 ปีที่แล้ว

    hi constantin thank you for this video but i face two error
    app.js:18932 Uncaught ReferenceError: throttle is not defined
    and for pickBy tooo

    • @cdruc
      @cdruc  3 ปีที่แล้ว

      Hey, make sure you import them from lodash (I'm importing it at 10:08). Laravel comes with lodash by default, so you should already have it installed.

  • @edisonpatronsabando3909
    @edisonpatronsabando3909 3 ปีที่แล้ว +1

    Thank bro

  • @yandinov
    @yandinov 3 ปีที่แล้ว +1

    with react bro

    • @zoyashakeel240
      @zoyashakeel240 2 ปีที่แล้ว

      have you found in react?

    • @yandinov
      @yandinov 2 ปีที่แล้ว

      @@zoyashakeel240 yes

    • @zoyashakeel240
      @zoyashakeel240 2 ปีที่แล้ว

      @@yandinov can you share with me?

  • @nadlife
    @nadlife 2 ปีที่แล้ว +1

    hello :)
    I am using laravel, inertia vue3 and inertia is using at 1:51 you are typing;
    watch : {
    params:{
    handler(){ this.$inertia.get(this.route('route'), this.params, {replace: true, preserveState:true })}
    }
    }
    for now $inertia does not supported. It is replaced with Inertia
    im am doing
    watch(() => dt_props.search, () => {
    this.Inertia.get(this.route('routeName'), dt_props.search, {replace:true, preserveState:true});
    })
    but i get no result with no error.
    what should do with my syntax?

    • @drugoviic
      @drugoviic ปีที่แล้ว

      this is not available with composition api,

  • @darwinllacuna5328
    @darwinllacuna5328 2 ปีที่แล้ว

    filters[name]=john how to transform this using inertia.get() ?