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


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

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

  • frosty

    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.



    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:

        <JqxGrid ref="myGrid"
    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
    import axios from "axios";
    export default {
      name: "app",
      components: {
      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) => {
            .then(response => {
              // Here you should sort data
              this.source.localdata = response.data.value;
        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);
    #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;

    I hope this will help.

    Best Regards,
    Hristo Hristov

    jQWidgets team


    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.