[SPARK-31446][WEBUI][3.0] Make html elements for a paged table possible to have different id attribute.

core/src/main/scala/org/apache/spark/ui/PagedTable.scala

@@ -115,17 +115,18 @@ private[spark] trait PagedTable[T] {
         _dataSource.pageSize
       }
 
-      val pageNavi = pageNavigation(pageToShow, pageSize, totalPages)
+      val pageNaviTop = pageNavigation(pageToShow, pageSize, totalPages, tableId + "-top")
+      val pageNaviBottom = pageNavigation(pageToShow, pageSize, totalPages, tableId + "-bottom")
 
       <div>
-        {pageNavi}
+        {pageNaviTop}
         <table class={tableCssClass} id={tableId}>
           {headers}
           <tbody>
             {data.map(row)}
           </tbody>
         </table>
-        {pageNavi}
+        {pageNaviBottom}
       </div>
     } catch {
       case e: IndexOutOfBoundsException =>
@@ -171,7 +172,11 @@ private[spark] trait PagedTable[T] {
    * > means jumping to the next page.
    * }}}
    */
-  private[ui] def pageNavigation(page: Int, pageSize: Int, totalPages: Int): Seq[Node] = {
+  private[ui] def pageNavigation(
+      page: Int,
+      pageSize: Int,
+      totalPages: Int,
+      navigationId: String = tableId): Seq[Node] = {
     // A group includes all page numbers will be shown in the page navigation.
     // The size of group is 10 means there are 10 page numbers will be shown.
     // The first group is 1 to 10, the second is 2 to 20, and so on
@@ -214,7 +219,7 @@ private[spark] trait PagedTable[T] {
 
     <div>
       <div>
-        <form id={s"form-$tableId-page"}
+        <form id={s"form-$navigationId-page"}
               method="get"
               action={Unparsed(goButtonFormPath)}
               class="form-inline pull-right"
@@ -223,12 +228,11 @@ private[spark] trait PagedTable[T] {
           <label>{totalPages} Pages. Jump to</label>
           <input type="text"
                  name={pageNumberFormField}
-                 id={s"form-$tableId-page-no"}
+                 id={s"form-$navigationId-page-no"}
                  value={page.toString} class="span1" />
-
           <label>. Show </label>
           <input type="text"
-                 id={s"form-$tableId-page-size"}
+                 id={s"form-$navigationId-page-size"}
                  name={pageSizeFormField}
                  value={pageSize.toString}
                  class="span1" />

core/src/test/scala/org/apache/spark/ui/PagedTableSuite.scala

@@ -85,6 +85,35 @@ class PagedTableSuite extends SparkFunSuite {
     assert((pagedTable.pageNavigation(93, 10, 97).head \\ "li").map(_.text.trim) ===
       Seq("<<", "<") ++ (91 to 97).map(_.toString) ++ Seq(">"))
   }
+
+  test("pageNavigation with different id") {
+    val pagedTable = new PagedTable[Int] {
+      override def tableId: String = "testTable"
+
+      override def tableCssClass: String = ""
+
+      override def dataSource: PagedDataSource[Int] = null
+
+      override def pageLink(page: Int): String = ""
+
+      override def headers: Seq[Node] = Nil
+
+      override def row(t: Int): Seq[Node] = Nil
+
+      override def pageSizeFormField: String = ""
+
+      override def pageNumberFormField: String = ""
+
+      override def goButtonFormPath: String = ""
+    }
+
+    val defaultIdNavigation = pagedTable.pageNavigation(1, 10, 2).head \\ "form"
+    assert(defaultIdNavigation \@ "id" === "form-testTable-page")
+
+    val customIdNavigation = pagedTable.pageNavigation(1, 10, 2, "customIdTable").head \\ "form"
+    assert(customIdNavigation \@ "id" === "form-customIdTable-page")
+    assert(defaultIdNavigation !== customIdNavigation)
+  }
 }
 
 private[spark] class SeqPagedDataSource[T](seq: Seq[T], pageSize: Int)