@sinashahoveisi
سلام. من میخوام سرور ساید فیلتر رو برای mui data table کد بزنم. توی داکیومنتش گفته اکشنی که مد نظره و اون فانکشنی که باید اجرا بشه رو باید مشخص کرد ولی هر تغییری میدم اوکی نمیشه . همینطور برای sorting هم نمیدونم چجوری باید اون رو پیاده سازی کنم. ممنون میشم کمکم کنید.
onTableChange: (action, tableState) => {
console.log(action,tableState);
switch (action) {
case 'changePage':
this.changePage(tableState.page);
break;
case 'search':
//this.searchHandler(tableState.searchText);
console.log(action)
this.setState({keyword:tableState.searchText})
}
جایی که کیس سرچ هست میخوام اون چیزی که سرچ شده توی استیتم آپدیت بشه ولی نمیشه. توی کنسول که آندیفاین میزنه. استیت رو هم که چک کردم دیدم فقط حرف آخر از اون چیزی که تایپ شده رو توی خودش ذخیره میکنه
با استفاده از sortDirection در options در columns میتوانید این کار را انجام دهید.
فایل Example.js : (فقط تابع sort مدنظرتان اعمال کنید)
import React from "react";
import { CircularProgress, Typography } from "@material-ui/core";
import MUIDataTable from "mui-datatables";
class Example extends React.Component {
state = {
page: 0,
count: 1,
rowsPerPage: 5,
sortOrder: {},
data: [["Loading Data..."]],
columns: [
{
name: "fullName",
},
{
name: "title",
label: "Title",
options: {}
},
{
name: "location",
label: "Location",
options: {}
}
],
isLoading: false
};
componentDidMount() {
this.getData("", 0);
}
// get data
getData = (url, page) => {
this.setState({ isLoading: true });
this.xhrRequest(url, page).then(res => {
this.setState({ data: res.data, isLoading: false, count: res.total });
});
};
getSrcData = () => {
return [
{
fullName: "Gabby George",
title: "Business Analyst",
location: "Minneapolis"
},
{
fullName: "Aiden Lloyd",
title: "Business Consultant",
location: "Dallas"
},
{ fullName: "Jaden Collins", title: "Attorney", location: "Santa Ana" },
{
fullName: "Franky Rees",
title: "Business Analyst",
location: "St. Petersburg"
},
{ fullName: "Aaren Rose", title: "Business Analyst", location: "Toledo" },
{
fullName: "John George",
title: "Business Analyst",
location: "Washington DC"
},
{
fullName: "Pat Lloyd",
title: "Computer Programmer",
location: "Baltimore"
},
{
fullName: "Joe Joe Collins",
title: "Attorney",
location: "Las Cruces"
},
{ fullName: "Franky Hershy", title: "Paper Boy", location: "El Paso" },
{
fullName: "Aaren Smalls",
title: "Business Analyst",
location: "Tokyo"
},
{ fullName: "Boogie G", title: "Police Officer", location: "Unknown" },
{
fullName: "James Roulf",
title: "Business Consultant",
location: "Video Game Land"
},
{
fullName: "Mike Moocow",
title: "Burger King Employee",
location: "New York"
},
{
fullName: "Mimi Gerock",
title: "Business Analyst",
location: "McCloud"
},
{
fullName: "Jason Evans",
title: "Business Analyst",
location: "Mt Shasta"
},
{
fullName: "Simple Sam",
title: "Business Analyst",
location: "Mt Shasta"
},
{
fullName: "Marky Mark",
title: "Business Consultant",
location: "Las Cruces"
},
{ fullName: "Jaden Jam", title: "Attorney", location: "El Paso" },
{
fullName: "Holly Jo",
title: "Business Analyst",
location: "St. Petersburg"
},
{ fullName: "Suzie Q", title: "Business Analyst", location: "New York" }
];
};
sort = (page, sortOrder) => {
this.setState({ isLoading: true });
console.log("sina", sortOrder);
this.xhrRequest(
`/myApiServer?page=${page}&sort_order=${sortOrder}`,
page,
sortOrder
).then(res => {
this.setState({
data: res.data,
page: res.page,
sortOrder,
isLoading: false,
count: res.total
});
});
};
// mock async function
xhrRequest = (url, page, sortOrder = {}) => {
return new Promise((resolve, reject) => {
// mock page data
let fullData = this.getSrcData();
let sortField = sortOrder.name;
let sortDir = sortOrder.direction;
const total = fullData.length; // mock record count from server - normally this would be a number attached to the return data
let col = this.state.columns
col = col.map((data)=>{
if (data.name === sortField ) {
return {
...data,
options: { sortDirection: sortDir }
}
}
else return {
...data,
options : {}
}
})
console.log('col', col)
this.setState(prevState => {
return {
...prevState,
columns : col
}
})
console.log("log", fullData[0], sortField);
if (sortField) {
fullData = fullData.sort((a, b) =>
a[sortField] > b[sortField]
? 1
: a[sortField] === b[sortField]
? a[sortField] > b[sortField]
? 1
: -1
: -1
);
}
const srcData = fullData.slice(
page * this.state.rowsPerPage,
(page + 1) * this.state.rowsPerPage
);
let data = srcData;
setTimeout(() => {
resolve({
data,
total,
page
});
}, 500);
});
};
changePage = (page, sortOrder) => {
sortOrder = {
name: 'title',
direction: 'asc'
}
console.log('page' , page , sortOrder)
this.setState({
isLoading: true
});
this.xhrRequest(`/myApiServer?page=${page}`, page, sortOrder).then(res => {
this.setState({
isLoading: false,
page: res.page,
sortOrder,
data: res.data,
count: res.total
});
});
};
render() {
const { data, page, count, isLoading, rowsPerPage, sortOrder } = this.state;
const options = {
filter: true,
filterType: "dropdown",
responsive: "vertical",
serverSide: true,
count: count,
rowsPerPage: rowsPerPage,
rowsPerPageOptions: [],
sortDirection:{
name: 'title',
direction: 'asc'
},
onTableChange: (action, tableState) => {
console.log(action, tableState);
// a developer could react to change on an action basis or
// examine the state as a whole and do whatever they want
switch (action) {
case "changePage":
this.changePage(tableState.page, tableState.sortOrder);
break;
case "sort":
let a = tableState.announceText
.replace("Table now sorted by ", "")
.replace(" :", "")
.split(" ");
if (a[1] === "descending") a[1] = "desc"
else a[1] = "asc"
let b = { name: a[0], direction: a[1] };
console.log(a);
this.sort(tableState.page, b);
break;
default:
console.log("action not handled.");
}
}
};
console.log("COLUMNS");
console.dir(JSON.parse(JSON.stringify(this.state.columns)));
return (
<div>
<MUIDataTable
title={
<Typography variant="h6">
ACME Employee list
{isLoading && (
<CircularProgress
size={24}
style={{ marginLeft: 15, position: "relative", top: 4 }}
/>
)}
</Typography>
}
data={data}
columns={this.state.columns}
options={options}
/>
</div>
);
}
}
export default Example;
سلام. کمی بیشتر در مورد سوالتون توضیح بدید.
لینک داکیومنتیشن رو بزارین
ورودی ها و خرو جی های مد نظرتون رو مشخص کنید
تا بشه سوالتون رو بررسی کرد
@kamran.davar
سلاام. این لینک داکیومنتیشنش هست
https://github.com/gregnb/mui-datatables
این هم یک مثال ازش:
https://codesandbox.io/s/muidatatables-custom-toolbar-9vynn?file=/index.js
من serverSide رو در optionها true قرار دادم. حالا میخوام sorting اون رو سمت سرور پیاده سازی کنم. به این صورت که اگر مثلا بر روی name کلیک شد من این sorting رو با api انجام بدم
کاری که برای sort کردن name انجام دادم:
@kamran.davar
@sinashahoveisi
onTableChange: (action, tableState) => {
console.log(action, tableState);
switch (action) {;
case 'sort':
console.log("action is" , action)
console.log("active column", tableState.activeColumn)
switch(tableState.activeColumn){
case '6' :
this.setState({sortKind:5 },()=>this.filterByCategories)
}
break;
}
},
ولی جواب نمیده. این هم تابع filterByCategory
filterByCategories = (page) => {
axios.post(`${process.env.REACT_APP_EMC_URL}api/printBatch/details`, {
relations: true,
take: 10,
skip: (page - 1) * 10,
storeID: this.state.checkedStore,
DepartmentCodes: this.state.checkedDepartment,
shelfLocationGuids: this.state.checkedShelfLocation,
warehouseDirectIndicators: this.state.checkedWarehouse,
ComplianceIndicator: this.state.checked,
keyword: this.state.keyword,
sortKind: this.state.sortKind,
sort:this.state.sort,
}).then(response => {
this.setState({
detailData: response.data.list,
isLoading: false,
count: response.data.totalCount,
})
})
}
کد های مربوط به این لینک رو مطالعه کردین؟ @parastooebrahimi
https://github.com/gregnb/mui-datatables/blob/master/examples/serverside-pagination/index.js
سلام به صورت زیر میتوانید انجام دهید:
فایل App.js
import React from "react";
import ReactDOM from "react-dom";
import Example from "./Example";
class App extends React.Component {
render() {
return (
<div>
<Example />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
و فایل Example.js :
import React from "react";
import { CircularProgress, Typography } from "@material-ui/core";
import MUIDataTable from "mui-datatables";
class Example extends React.Component {
state = {
page: 0,
count: 1,
rowsPerPage: 5,
sortOrder: {},
data: [["Loading Data..."]],
columns: [
{
name: "fullName",
label: "Full Name",
options: {
customBodyRender: (value, tableMeta, updateValue) => {
// Here you can render a more complex display.
// You're given access to tableMeta, which has
// the rowData (as well as the original object data).
// See the console for a detailed look at this object.
console.log("customBodyRender");
console.dir(tableMeta);
return value;
}
}
},
{
name: "title",
label: "Title",
options: {}
},
{
name: "location",
label: "Location",
options: {}
}
],
isLoading: false
};
componentDidMount() {
this.getData("", 0);
}
// get data
getData = (url, page) => {
this.setState({ isLoading: true });
this.xhrRequest(url, page).then(res => {
this.setState({ data: res.data, isLoading: false, count: res.total });
});
};
getSrcData = () => {
return [
{
fullName: "Gabby George",
title: "Business Analyst",
location: "Minneapolis"
},
{
fullName: "Aiden Lloyd",
title: "Business Consultant",
location: "Dallas"
},
{ fullName: "Jaden Collins", title: "Attorney", location: "Santa Ana" },
{
fullName: "Franky Rees",
title: "Business Analyst",
location: "St. Petersburg"
},
{ fullName: "Aaren Rose", title: "Business Analyst", location: "Toledo" },
{
fullName: "John George",
title: "Business Analyst",
location: "Washington DC"
},
{
fullName: "Pat Lloyd",
title: "Computer Programmer",
location: "Baltimore"
},
{
fullName: "Joe Joe Collins",
title: "Attorney",
location: "Las Cruces"
},
{ fullName: "Franky Hershy", title: "Paper Boy", location: "El Paso" },
{
fullName: "Aaren Smalls",
title: "Business Analyst",
location: "Tokyo"
},
{ fullName: "Boogie G", title: "Police Officer", location: "Unknown" },
{
fullName: "James Roulf",
title: "Business Consultant",
location: "Video Game Land"
},
{
fullName: "Mike Moocow",
title: "Burger King Employee",
location: "New York"
},
{
fullName: "Mimi Gerock",
title: "Business Analyst",
location: "McCloud"
},
{
fullName: "Jason Evans",
title: "Business Analyst",
location: "Mt Shasta"
},
{
fullName: "Simple Sam",
title: "Business Analyst",
location: "Mt Shasta"
},
{
fullName: "Marky Mark",
title: "Business Consultant",
location: "Las Cruces"
},
{ fullName: "Jaden Jam", title: "Attorney", location: "El Paso" },
{
fullName: "Holly Jo",
title: "Business Analyst",
location: "St. Petersburg"
},
{ fullName: "Suzie Q", title: "Business Analyst", location: "New York" }
];
};
sort = (page, sortOrder) => {
this.setState({ isLoading: true });
console.log("sina", sortOrder);
this.xhrRequest(
`/myApiServer?page=${page}&sort_order=${sortOrder}`,
page,
sortOrder
).then(res => {
this.setState({
data: res.data,
page: res.page,
sortOrder,
isLoading: false,
count: res.total
});
});
};
// mock async function
xhrRequest = (url, page, sortOrder = {}) => {
return new Promise((resolve, reject) => {
// mock page data
let fullData = this.getSrcData();
const total = fullData.length; // mock record count from server - normally this would be a number attached to the return data
let sortField = sortOrder.name;
let sortDir = sortOrder.direction;
console.log("log", fullData[0], sortField);
if (sortField) {
fullData = fullData.sort((a, b) =>
a[sortField] > b[sortField]
? 1
: a[sortField] === b[sortField]
? a[sortField] > b[sortField]
? 1
: -1
: -1
);
}
const srcData = fullData.slice(
page * this.state.rowsPerPage,
(page + 1) * this.state.rowsPerPage
);
let data = srcData;
setTimeout(() => {
resolve({
data,
total,
page
});
}, 500);
});
};
changePage = (page, sortOrder) => {
this.setState({
isLoading: true
});
this.xhrRequest(`/myApiServer?page=${page}`, page, sortOrder).then(res => {
this.setState({
isLoading: false,
page: res.page,
sortOrder,
data: res.data,
count: res.total
});
});
};
render() {
const { data, page, count, isLoading, rowsPerPage, sortOrder } = this.state;
const options = {
filter: true,
filterType: "dropdown",
responsive: "vertical",
serverSide: true,
count: count,
rowsPerPage: rowsPerPage,
rowsPerPageOptions: [],
sortOrder: sortOrder,
onTableChange: (action, tableState) => {
console.log(action, tableState);
// a developer could react to change on an action basis or
// examine the state as a whole and do whatever they want
switch (action) {
case "changePage":
this.changePage(tableState.page, tableState.sortOrder);
break;
case "sort":
let a = tableState.announceText
.replace("Table now sorted by ", "")
.replace(" :", "")
.split(" ");
let b = { name: a[0], direction: a[1] };
console.log(a);
this.sort(tableState.page, b);
break;
default:
console.log("action not handled.");
}
}
};
console.log("COLUMNS");
console.dir(JSON.parse(JSON.stringify(this.state.columns)));
return (
<div>
<MUIDataTable
title={
<Typography variant="h6">
ACME Employee list
{isLoading && (
<CircularProgress
size={24}
style={{ marginLeft: 15, position: "relative", top: 4 }}
/>
)}
</Typography>
}
data={data}
columns={this.state.columns}
options={options}
/>
</div>
);
}
}
export default Example;
@kamran.davar بله.. مشکل کد خودم رو نمیفهمم چرا جواب نمیده ولی با کد بالا یه مقداریش درست عمل میکنه..
@sinashahoveisi
ممنونم ازتون. الان لاگ رو که چک میکنم فقط descending هست و هر چقدر کلیک میکنم برای سورتینگ باز هی descending رو بر میگردونه و ascending نمیشه. فلشیم که برای سورتینگ بالا و پایین میشه هم بعد از اولین کلیک محو میشه...
فانکشن سورتم به صورت زیره :
handleSort = (active) => {
this.setState({ isLoading: true });
console.log("sina", active);
debugger
switch (active.name) {
case 'Name':
active.direction=='ascending' ? this.setState({ sortKind: 5 ,sort:0 }, () => this.filterByCategories()) : this.setState({ sortKind: 5 ,sort:1 }, () => this.filterByCategories())
break;
}
}
توی آپشن ها onTableChange هم به صورت زیرهست:
onTableChange: (action, tableState) => {
console.log(action, tableState);
switch (action) {
case 'changePage':
this.changePage(tableState.page);
break;
case "sort":
let a = tableState.announceText
.replace("Table now sorted by ", "")
.replace(" :", "")
.split(" ");
let b = { name: a[0], direction: a[1] };
console.log("a is",a);
console.log("b is",b);
this.handleSort( b);
break;
}
},
با استفاده از sortDirection در options در columns میتوانید این کار را انجام دهید.
فایل Example.js : (فقط تابع sort مدنظرتان اعمال کنید)
import React from "react";
import { CircularProgress, Typography } from "@material-ui/core";
import MUIDataTable from "mui-datatables";
class Example extends React.Component {
state = {
page: 0,
count: 1,
rowsPerPage: 5,
sortOrder: {},
data: [["Loading Data..."]],
columns: [
{
name: "fullName",
},
{
name: "title",
label: "Title",
options: {}
},
{
name: "location",
label: "Location",
options: {}
}
],
isLoading: false
};
componentDidMount() {
this.getData("", 0);
}
// get data
getData = (url, page) => {
this.setState({ isLoading: true });
this.xhrRequest(url, page).then(res => {
this.setState({ data: res.data, isLoading: false, count: res.total });
});
};
getSrcData = () => {
return [
{
fullName: "Gabby George",
title: "Business Analyst",
location: "Minneapolis"
},
{
fullName: "Aiden Lloyd",
title: "Business Consultant",
location: "Dallas"
},
{ fullName: "Jaden Collins", title: "Attorney", location: "Santa Ana" },
{
fullName: "Franky Rees",
title: "Business Analyst",
location: "St. Petersburg"
},
{ fullName: "Aaren Rose", title: "Business Analyst", location: "Toledo" },
{
fullName: "John George",
title: "Business Analyst",
location: "Washington DC"
},
{
fullName: "Pat Lloyd",
title: "Computer Programmer",
location: "Baltimore"
},
{
fullName: "Joe Joe Collins",
title: "Attorney",
location: "Las Cruces"
},
{ fullName: "Franky Hershy", title: "Paper Boy", location: "El Paso" },
{
fullName: "Aaren Smalls",
title: "Business Analyst",
location: "Tokyo"
},
{ fullName: "Boogie G", title: "Police Officer", location: "Unknown" },
{
fullName: "James Roulf",
title: "Business Consultant",
location: "Video Game Land"
},
{
fullName: "Mike Moocow",
title: "Burger King Employee",
location: "New York"
},
{
fullName: "Mimi Gerock",
title: "Business Analyst",
location: "McCloud"
},
{
fullName: "Jason Evans",
title: "Business Analyst",
location: "Mt Shasta"
},
{
fullName: "Simple Sam",
title: "Business Analyst",
location: "Mt Shasta"
},
{
fullName: "Marky Mark",
title: "Business Consultant",
location: "Las Cruces"
},
{ fullName: "Jaden Jam", title: "Attorney", location: "El Paso" },
{
fullName: "Holly Jo",
title: "Business Analyst",
location: "St. Petersburg"
},
{ fullName: "Suzie Q", title: "Business Analyst", location: "New York" }
];
};
sort = (page, sortOrder) => {
this.setState({ isLoading: true });
console.log("sina", sortOrder);
this.xhrRequest(
`/myApiServer?page=${page}&sort_order=${sortOrder}`,
page,
sortOrder
).then(res => {
this.setState({
data: res.data,
page: res.page,
sortOrder,
isLoading: false,
count: res.total
});
});
};
// mock async function
xhrRequest = (url, page, sortOrder = {}) => {
return new Promise((resolve, reject) => {
// mock page data
let fullData = this.getSrcData();
let sortField = sortOrder.name;
let sortDir = sortOrder.direction;
const total = fullData.length; // mock record count from server - normally this would be a number attached to the return data
let col = this.state.columns
col = col.map((data)=>{
if (data.name === sortField ) {
return {
...data,
options: { sortDirection: sortDir }
}
}
else return {
...data,
options : {}
}
})
console.log('col', col)
this.setState(prevState => {
return {
...prevState,
columns : col
}
})
console.log("log", fullData[0], sortField);
if (sortField) {
fullData = fullData.sort((a, b) =>
a[sortField] > b[sortField]
? 1
: a[sortField] === b[sortField]
? a[sortField] > b[sortField]
? 1
: -1
: -1
);
}
const srcData = fullData.slice(
page * this.state.rowsPerPage,
(page + 1) * this.state.rowsPerPage
);
let data = srcData;
setTimeout(() => {
resolve({
data,
total,
page
});
}, 500);
});
};
changePage = (page, sortOrder) => {
sortOrder = {
name: 'title',
direction: 'asc'
}
console.log('page' , page , sortOrder)
this.setState({
isLoading: true
});
this.xhrRequest(`/myApiServer?page=${page}`, page, sortOrder).then(res => {
this.setState({
isLoading: false,
page: res.page,
sortOrder,
data: res.data,
count: res.total
});
});
};
render() {
const { data, page, count, isLoading, rowsPerPage, sortOrder } = this.state;
const options = {
filter: true,
filterType: "dropdown",
responsive: "vertical",
serverSide: true,
count: count,
rowsPerPage: rowsPerPage,
rowsPerPageOptions: [],
sortDirection:{
name: 'title',
direction: 'asc'
},
onTableChange: (action, tableState) => {
console.log(action, tableState);
// a developer could react to change on an action basis or
// examine the state as a whole and do whatever they want
switch (action) {
case "changePage":
this.changePage(tableState.page, tableState.sortOrder);
break;
case "sort":
let a = tableState.announceText
.replace("Table now sorted by ", "")
.replace(" :", "")
.split(" ");
if (a[1] === "descending") a[1] = "desc"
else a[1] = "asc"
let b = { name: a[0], direction: a[1] };
console.log(a);
this.sort(tableState.page, b);
break;
default:
console.log("action not handled.");
}
}
};
console.log("COLUMNS");
console.dir(JSON.parse(JSON.stringify(this.state.columns)));
return (
<div>
<MUIDataTable
title={
<Typography variant="h6">
ACME Employee list
{isLoading && (
<CircularProgress
size={24}
style={{ marginLeft: 15, position: "relative", top: 4 }}
/>
)}
</Typography>
}
data={data}
columns={this.state.columns}
options={options}
/>
</div>
);
}
}
export default Example;
@sinashahoveisi
ممنونم ازتون. کدم رو به صورت زیر تغییر دادم و درست شد:
onTableChange: (action, tableState) => {
//console.log(action, tableState);
switch (action) {
case 'changePage':
this.changePage(tableState.page);
break;
case "sort":
let a = tableState.announceText
.replace("Table now sorted by ", "")
.replace(" :", "")
.split(" ");
if (a[1] === "descending") a[1] = "desc"
else a[1] = "asc"
let b = { name: a[0], direction: a[1] };
console.log("a is",a);
console.log("b is",b);
let changedColumn= b.name
let direction=b.direction
let col = this.state.columns.map(data => {
if (data.name === changedColumn) {
return {
...data,
options: { sortDirection: direction }
};
} else
return {
...data,
options: {}
};
});
console.log("col", col);
console.log("direction is", direction)
this.setState(prevState=>({
...prevState,
columns:col
}),()=>this.handleSort(changedColumn,direction))
break;
}
},
@sinashahoveisi
فقط یه مشکل دیگه که میمونه با کد بالا همه ی تنظیماتی که توی options برای رندر کردن OnSelectedColumns , customBodyRender کرده بودم حذف میشه و به جاش دایرکشنو فقط توی option ها میزاره.. چه کنم که بقیه ی آپشن ها بمونن و فقط sortDirection رو تغییر بده؟
میتونید متغیر col رو به شکل زیر تغییر دهید.
col = col.map(data => {
if (data.name === sortField) {
console.log("sina log", data.options);
return {
...data,
options: {
...data.options,
sortDirection: sortDir
}
};
} else{
delete data.options.sortDirection
return {
...data,
options: {
...data.options,
}
};
}
});
سلام و وقت بخیر، عذرمیخوام توی همین آپشن های mui-datatable یک آپشن به اسم downloadOptions هست که مربوط به گرفتن خروجی csv میباشد. این خروجی از زبان فارسی پشتیبانی نمیکند، خواستم بپرسم چطور این امکان رو میشه فراهم کرد که type فایل روی utf8 تنظیم شده و موقع دانلود خروجی از فارسی هم پشتیبانی کند؟ سپاس
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟