diff --git a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts
index d6969aa0f2e..643f481e041 100644
--- a/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts
+++ b/web-app/src/app/routes/monitor/monitor-list/monitor-list.component.ts
@@ -147,6 +147,31 @@ export class MonitorListComponent implements OnInit {
       }
     );
   }
+  changeMonitorTable(sortField?: string | null, sortOrder?: string | null) {
+    this.tableLoading = true;
+    let monitorInit$ = this.monitorSvc
+      .searchMonitors(this.app, this.tag, this.filterContent, this.filterStatus, this.pageIndex - 1, this.pageSize, sortField, sortOrder)
+      .subscribe(
+        message => {
+          this.tableLoading = false;
+          this.checkedAll = false;
+          this.checkedMonitorIds.clear();
+          if (message.code === 0) {
+            let page = message.data;
+            this.monitors = page.content;
+            this.pageIndex = page.number + 1;
+            this.total = page.totalElements;
+          } else {
+            console.warn(message.msg);
+          }
+          monitorInit$.unsubscribe();
+        },
+        error => {
+          this.tableLoading = false;
+          monitorInit$.unsubscribe();
+        }
+      );
+  }
 
   onEditOneMonitor(monitorId: number) {
     if (monitorId == null) {
@@ -422,7 +447,7 @@ export class MonitorListComponent implements OnInit {
     const currentSort = sort.find(item => item.value !== null);
     const sortField = (currentSort && currentSort.key) || null;
     const sortOrder = (currentSort && currentSort.value) || null;
-    this.loadMonitorTable(sortField, sortOrder);
+    this.changeMonitorTable(sortField, sortOrder);
   }
 
   protected readonly sliceTagName = formatTagName;
diff --git a/web-app/src/app/service/monitor.service.ts b/web-app/src/app/service/monitor.service.ts
index 022c8b8ed5c..5d0a9e52171 100644
--- a/web-app/src/app/service/monitor.service.ts
+++ b/web-app/src/app/service/monitor.service.ts
@@ -129,7 +129,9 @@ export class MonitorService {
     searchValue: string,
     status: number,
     pageIndex: number,
-    pageSize: number
+    pageSize: number,
+    sortField?: string | null,
+    sortOrder?: string | null
   ): Observable<Message<Page<Monitor>>> {
     pageIndex = pageIndex ? pageIndex : 0;
     pageSize = pageSize ? pageSize : 8;
@@ -148,6 +150,12 @@ export class MonitorService {
     if (app != undefined) {
       httpParams = httpParams.append('app', app);
     }
+    if (sortField != null && sortOrder != null) {
+      httpParams = httpParams.appendAll({
+        sort: sortField,
+        order: sortOrder == 'ascend' ? 'asc' : 'desc'
+      });
+    }
     if (searchValue != undefined && searchValue != '' && searchValue.trim() != '') {
       httpParams = httpParams.append('name', searchValue);
       httpParams = httpParams.append('host', searchValue);