jQuery UI Widgets Forums Vue(New) vue jqxGrid pagination, filter and sorting on server side

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  frosty 1 week, 1 day ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • frosty
    Participant

    Hi,
    I’m looking for sample code to do pagination, filter and sorting on server side for vue jqxGrid component. I tried pager function without any luck.
    Appreciate if you can share a sample code.

    Thanks,
    Gopal


    Hristo
    Participant

    Hello Gopal,

    Unfortunately, I am not able to provide you a full example that demonstrates all requests.
    We will discuss this with my colleagues.
    Meanwhile, I would like to suggest you one example that suggest how to handle the server sorting:

    <template>
        <JqxGrid ref="myGrid"
          :width="getWidth"
    
          :virtualmode="true"
          :rendergridrows="rendergridrows"
          
          :sortable="true"
          :source="dataAdapter"
          :columns="columns"
          :columnsresize="true"
          :ready="ready"
        ></JqxGrid>
    </template>
    
    <script>
    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
    
    import axios from "axios";
    
    export default {
      name: "app",
      components: {
        JqxGrid
      },
      data: function() {
        return {
          getWidth: 400,
          dataAdapter: new jqx.dataAdapter(this.source),
          columns: [
            { text: "ID", datafield: "id", width: 80 },
            { text: "Joke", datafield: "joke" }
          ],
          rendergridrows: (params) => {
            return params.data;
          }
        };
      },
      beforeCreate: function() {
        const getData = (column, direction) => {
          axios
            .get('http://api.icndb.com/jokes/random/10')
            .then(response => {
              // Here you should sort data
              this.source.localdata = response.data.value;
    		  this.$refs.myGrid.updatebounddata("sort");
            });
        }
        this.source = {
          datatype: "json",
          datafields: [
            { name: "id", type: "number" },
            { name: "joke", type: "string" }
          ],
          url: "http://api.icndb.com/jokes/random/10",
          sort: (column, direction) => {
            getData(column, direction);
          }
        };
      }
    };
    </script>
    
    <style>
    #app {
      font-family: "Avenir", Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com


    frosty
    Participant

    Thanks for the sample code. This helped to sort the data on server side. But I’m still not able to do pagination. There must be a way to set current page from server and total number of rows of the entire result set?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.