Data Format (JSON)

Data Format (JSON)

The default data format is as follow, but you can always provide the path to the data and pagination in your JSON data structure instead, by using data-path and pagination-path properties.

{
	"links": {
		"pagination": {
			"total": 50,
			"per_page": 15,
			"current_page": 1,
			"last_page": 4,
			"from": 1,
			"to": 15,
		}
	},
	"data": [
		{
			"id": 1,
			"name": "xxxxxxxxx",
			"nickname": "xxxxxxx",
			"email": "[email protected]",
			"birthdate": "xxxx-xx-xx",
			"gender": "X",
			"group_id": 1,
		}
			.
			.
			.
		{
			"id": 50,
			"name": "xxxxxxxxx",
			"nickname": "xxxxxxx",
			"email": "[email protected]",
			"birthdate": "xxxx-xx-xx",
			"gender": "X",
			"group_id": 3,
		}
	]
}

If you're familiar with Laravel, you would know that Laravel automatically convert the query data to JSON format when Eloquent objects are returned from application's routes or controllers. And if you use paginate() function, the result would look something like this.

{
	"total": 50,
	"per_page": 15,
	"current_page": 1,
	"last_page": 4,
	"from": 1,
	"to": 15,
	"data": [
		{
			"id": 1,
			"name": "xxxxxxxxx",
			"nickname": "xxxxxxx",
			"email": "[email protected]",
			"birthdate": "xxxx-xx-xx",
			"gender": "X",
			"group_id": 1,
		}
			.
			.
			.
		{
			"id": 50,
			"name": "xxxxxxxxx",
			"nickname": "xxxxxxx",
			"email": "[email protected]",
			"birthdate": "xxxx-xx-xx",
			"gender": "X",
			"group_id": 3,
		}
	]
}

In this case, you just specify values for dataPath and paginationPath like so

	<div id="app">
	    <vuetable
	        api-url="/api/users"
	        :fields="columns"
	        data-path="data"
	        pagination-path=""
	    ></vuetable>
    </div>

This tells vuetable that the data is in the path name data inside the JSON structure returned from the server, and the pagination is in the root of the JSON structure.