When table has no data page shows an error

[Asif Haciyev]

Hi,
I am creating a CRUD application in Spring MVC. So, I have a table on the page that shows all data and also I provide it with pagination.And my problem is when the table has at least one row it works and shows data properly, but if  table doesn't have any data (no row) the page shows an error.

This is my Controller for this page:

 @GetMapping("/servers-info")
    public ModelAndView serversInfo(Model model, @RequestParam(defaultValue = "1") int pageNumber) {
        ModelAndView mav = new ModelAndView("/servers-info");
        mav.addObject("server", new Server());
        Page<Server> page = serverService.findAllServers(pageNumber - 1, 8);
        model.addAttribute("servers", page);
        return mav;
    }

This is table body:

       <tbody>
            <c:if test="${not empty servers.content}">
                <c:forEach var="server" items="${servers.content}">
                    <tr>
                        <td>
							<span class="custom-checkbox">
								<input type="checkbox" class="check-bx option" id="checkbox1" name="options[]"
                                       value="1">
								<label for="checkbox1"></label>
							</span>
                        </td>

                        <td class="add-line">${server.ip}</td>
                        <td class="add-line">${server.username}</td>
                        <td class="add-line">${server.password}</td>
                        <td class="add-line">${server.projectName}</td>
                        <td class="add-line">${server.description}</td>
                        <td class="add-line">${server.mysqlUser}</td>
                        <td class="add-line">${server.mysqlPassword}</td>
                        <td class="add-line">${server.mysqlRemoteUser}</td>
                        <td class="add-line">${server.mysqlRemotePassword}</td>
                        <td>
                            <a href="<c:url value="servers-info/server"> <c:param name="id" value="${server.id}"></c:param> </c:url>"
                               class="edit" data-toggle="modal" id="edit">
                                <i class="material-icons"
                                   data-toggle="tooltip"
                                   title="Edit"></i>
                            </a>
                            <a href="<c:url value="/servers-info/delete"> <c:param name="id" value="${server.id}"></c:param> </c:url>"
                               class="delete" data-toggle="modal" id="delete">
                                <i class="material-icons"
                                   data-toggle="tooltip"
                                   title="Delete"></i>
                            </a>
                        </td>
                    </tr>
                </c:forEach>
            </c:if>
       </tbody>

This is pagination part:

       <div class="clearfix">
            <ul class="pagination">
                <li class="page-item">
                    <c:if test="${servers.hasPrevious()}">
                        <a href="<c:url value=""> <c:param name="pageNumber" value="${servers.number}"></c:param> </c:url>"
                           class="page-link">Previous</a>
                    </c:if>
                </li>
                <c:forEach begin="0" end="${servers.totalPages-1}" var="i">
                    <li class="page-item">
                        <c:choose>
                            <%--Make active current page number--%>
                            <c:when test="${servers.number == i}">
                                <a href="<c:url value=""><c:param name="pageNumber" value="${i+1}"></c:param> </c:url> "
                                   class="page-link"
                                   style="background-color:#03A9F4; color:white; cursor:text">${i+1}</a>
                            </c:when>
                            <%--If page number is not current then just write--%>
                            <c:otherwise>
                                <a href="<c:url value=""><c:param name="pageNumber" value="${i+1}"></c:param> </c:url> "
                                   class="page-link">${i+1}</a>
                            </c:otherwise>
                        </c:choose>
                    </li>
                </c:forEach>
                <li class="page-item">
                    <c:if test="${servers.hasNext()}">
                        <a href="<c:url value=""> <c:param name="pageNumber" value="${servers.number+2}"></c:param> </c:url>"
                           class="page-link">Next</a>
                    </c:if>
                </li>
            </ul>
       </div>

And here is the error which I am getting when table has no data:

There was an unexpected error (type=Internal Server Error, status=500).
'end' < 0
javax.servlet.jsp.JspTagException: 'end' < 0
at javax.servlet.jsp.jstl.core.LoopTagSupport.validateEnd(LoopTagSupport.java:487)
at org.apache.taglibs.standard.tag.rt.core.ForEachTag.setEnd(ForEachTag.java:62)
at org.apache.jsp.templates.servers_002dinfo_jsp._jspx_meth_c_005fforEach_005f1(servers_002dinfo_jsp.java:794)
at org.apache.jsp.templates.servers_002dinfo_jsp._jspService(servers_002dinfo_jsp.java:251)
at org.apache.jasper.runtime.HttpJspBase.service(HttpJspBase.java:70)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:476)
at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:385)
at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:329)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:712)
at org.apache.catalina.core.ApplicationDispatcher.processRequest(ApplicationDispatcher.java:459)
at org.apache.catalina.core.ApplicationDispatcher.doForward(ApplicationDispatcher.java:384)
at org.apache.catalina.core.ApplicationDispatcher.forward(ApplicationDispatcher.java:312)
at org.springframework.security.web.header.HeaderWriterFilter$HeaderWriterRequestDispatcher.forward(HeaderWriterFilter.java:143)
at org.springframework.web.servlet.view.InternalResourceView.renderMergedOutputModel(InternalResourceView.java:170)
at org.springframework.web.servlet.view.AbstractView.render(AbstractView.java:316)
at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1371)
at org.springframework.web.servlet.DispatcherServlet.processDispatchResult(DispatcherServlet.java:1117)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1056)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:942)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:1005)
at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:897)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:634)
at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:882)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:741)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:231)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:53)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:320)
at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.invoke(FilterSecurityInterceptor.java:127)
at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.doFilter(FilterSecurityInterceptor.java:91)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:119)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.session.SessionManagementFilter.doFilter(SessionManagementFilter.java:137)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.authentication.AnonymousAuthenticationFilter.doFilter(AnonymousAuthenticationFilter.java:111)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.servletapi.SecurityContextHolderAwareRequestFilter.doFilter(SecurityContextHolderAwareRequestFilter.java:170)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.savedrequest.RequestCacheAwareFilter.doFilter(RequestCacheAwareFilter.java:63)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.authentication.AbstractAuthenticationProcessingFilter.doFilter(AbstractAuthenticationProcessingFilter.java:200)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.authentication.logout.LogoutFilter.doFilter(LogoutFilter.java:116)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.header.HeaderWriterFilter.doFilterInternal(HeaderWriterFilter.java:74)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.context.SecurityContextPersistenceFilter.doFilter(SecurityContextPersistenceFilter.java:105)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.context.request.async.WebAsyncManagerIntegrationFilter.doFilterInternal(WebAsyncManagerIntegrationFilter.java:56)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:334)
at org.springframework.security.web.FilterChainProxy.doFilterInternal(FilterChainProxy.java:215)
at org.springframework.security.web.FilterChainProxy.doFilter(FilterChainProxy.java:178)
at org.springframework.web.filter.DelegatingFilterProxy.invokeDelegate(DelegatingFilterProxy.java:357)
at org.springframework.web.filter.DelegatingFilterProxy.doFilter(DelegatingFilterProxy.java:270)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:200)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:118)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:166)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:202)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:96)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:490)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:139)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:92)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:74)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:343)
at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:408)
at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:853)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1587)
at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Thread.java:748)

What is the problem here?

[Dave Tolls]

<c:forEach begin="0" end="${servers.totalPages-1}" var="i">

When totalPages is zero then this will give you the error as end will be -1.

You might need to put in a special case when there is no data.
Maybe just displaying some text saying "No servers found", with no page numbers.

[Asif Haciyev]

Thank you, Dave, it works properly!

I added this condition:

 <c:choose>
     <c:when test="${servers.totalPages<1}">
         <h1 style="text-align: center">No servers found</h1>
     </c:when>
     <c:otherwise>
          <%--Pagination code remained same--%>
     </c:otherwise>
 </c:choose>

[Asif Haciyev]

Small question here:

Well, in the table body I have checkboxes at beginning of each row and their value is corresponding rows id. I want that after checking some rows the user will be able to delete checked rows. I send post request to my controller,  but the values doesn't come there. What is the reason of it and how to solve it?

My controller for the page which table on:

 @GetMapping("/servers-info")
    public ModelAndView serversInfo(Model model, @RequestParam(defaultValue = "1") int pageNumber) {
        ModelAndView mav = new ModelAndView("/servers-info");
        mav.addObject("server", new Server());
        Page<Server> page = serverService.findAllServers(pageNumber - 1, 8);
        model.addAttribute("servers", page);
        return mav;
    }

My post method controller which tries to handle that request:

  @PostMapping("servers-info/delete-selected")
    public String deleteSelected(HttpServletRequest request) {
        System.out.println("Inside method");
        if (request.getParameterValues("id") == null) {
            System.out.println("No values came");
        }
        if (request.getParameterValues("id") != null) {
            for (String idVal : request.getParameterValues("id")) {
                serverService.deleteById(Integer.parseInt(idVal));
            }
        }
        return "redirect:/servers-info";
    }

And the table here:

       <form method="post" action="">
            <table class="table table-striped table-bordered table-hover">
                <%--Table Headers--%>
                <thead>
                <tr>
                    <th>
							<span class="custom-checkbox">
								<input type="checkbox" class="check-bx" id="selectAll">
								<label for="selectAll"></label>
							</span>
                    </th>
                    <th>IP</th>
                    <th>Username</th>
                    <th>Password</th>
                    <th>Prj Name</th>
                    <th>Description</th>
                    <th>MySQL User</th>
                    <th>MySQL Psw</th>
                    <th>MySQL R User</th>
                    <th>MySQL R Psw</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <%--Writing data to the table--%>
                <tbody>
                <c:if test="${not empty servers.content}">
                    <c:forEach var="server" items="${servers.content}" varStatus="status">
                        <tr>
                            <td>
							<span class="custom-checkbox">
							<input type="checkbox" class="check-bx option" id="checkbox1"
                                   name="id"
                                   value="${server.id}">
								<label for="checkbox1"></label>
							</span>
                            </td>

                            <td>${server.ip}</td>
                            <td>${server.username}</td>
                            <td>${server.password}</td>
                            <td>${server.projectName}</td>
                            <td>${server.description}</td>
                            <td>${server.mysqlUser}</td>
                            <td>${server.mysqlPassword}</td>
                            <td>${server.mysqlRemoteUser}</td>
                            <td>${server.mysqlRemotePassword}</td>
                            <td>
                                <a href="<c:url value="servers-info/server"> <c:param name="id" value="${server.id}"></c:param> </c:url>"
                                   class="edit" data-toggle="modal" id="edit">
                                    <i class="material-icons"
                                       data-toggle="tooltip"
                                       title="Edit"></i>
                                </a>
                                <a href="<c:url value="/servers-info/delete"> <c:param name="id" value="${server.id}"></c:param> </c:url>"
                                   class="delete" data-toggle="modal" id="delete">
                                    <i class="material-icons"
                                       data-toggle="tooltip"
                                       title="Delete"></i>
                                </a>
                            </td>
                        </tr>
                    </c:forEach>
                </c:if>
                </tbody>
            </table>
        </form>

[Dave Tolls]

Well, the first step with this is to hit F12 in the browse and click on the network tab of the developer tools and see exactly what is sent to the server when you submit the request.

[Asif Haciyev]

Dave Tolls wrote:Well, the first step with this is to hit F12 in the browse and click on the network tab of the developer tools and see exactly what is sent to the server when you submit the request.

Nothing sended

General

Request URL: http://localhost:8080/servers-info
Request Method: GET
Status Code: 200
Remote Address: [::1]:8080
Referrer Policy: no-referrer-when-downgrade


Response Headers

Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Language: en-US
Content-Type: text/html;charset=UTF-8
Date: Wed, 21 Aug 2019 13:20:23 GMT
Expires: 0
Pragma: no-cache
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block


Request Headers

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: max-age=0
Connection: keep-alive
Cookie: JSESSIONID=BB301CF09CCD8868198E1BA79804BC48
Host: localhost:8080
Referer: http://localhost:8080/servers-info
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: none
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

[Dave Tolls]

OK, well what is the HTML that you think is supposed to send the list of selected ids to the server?

That is, what is the HTML on the browser (forget the JSP for now).

[Asif Haciyev]

Dave Tolls wrote:OK, well what is the HTML that you think is supposed to send the list of selected ids to the server?

That is, what is the HTML on the browser (forget the JSP for now).

-The form tag which has post method and wraps the table?

[Dave Tolls]

Yes.
What does that look like on the browser?

Does it have the data?
Is the data in the correct fields?
Is it going to send to the correct URL?
etc etc

[Asif Haciyev]

Dave Tolls wrote:Yes.
What does that look like on the browser?

Does it have the data?
Is the data in the correct fields?
Is it going to send to the correct URL?
etc etc

It looks like a single row on the table
No, it doesn't have
-
Yes, it is going to correct URL which I want to send to - /servers-info/delete-selected URL

[Dave Tolls]

So there's no data in the table?

Can you paste the HTML in here?
It's hard to visualise what your issue is.

[Asif Haciyev]

Dave Tolls wrote:So there's no data in the table?

Can you paste the HTML in here?
It's hard to visualise what your issue is.

There is data in the table, yes. I'm sorry, I got the question in a wrong way.
And I have shared html of the table above.

[Dave Tolls]

No, you've posted the JSP page that produces the table.
I was specifically asking for the HTML as it appears in the browser.

That's a very important check to ensure that your JSP is producing what you think it is producing.
You need that because it is that which defines what happens on the browser.

Essentially, when you get a situation where an event on a browser doesn't seem to produce anything you want to work from the browser, not the JSp (which is server-side).
So first step is "does it send anything".
If so, what does it send.
If that's correct then that is the point you go to the server and see what the servlet is doing with the request.

If it's not sending the correct thing (or anything at all) you then need to look at the HTML on the browser, and possibly debug Javascript if there's any processing before making a request to the server.
That HTML (and any associated script) will determine what is happening.

So, from what you posted earlier it looks like it's not making a request.
So you need to look at the actual HTML.
Until you determine what is not correct in that then there is little point peering at JSP tags.

[Asif Haciyev]

Dave Tolls wrote:No, you've posted the JSP page that produces the table.
I was specifically asking for the HTML as it appears in the browser.

That's a very important check to ensure that your JSP is producing what you think it is producing.
You need that because it is that which defines what happens on the browser.

Essentially, when you get a situation where an event on a browser doesn't seem to produce anything you want to work from the browser, not the JSp (which is server-side).
So first step is "does it send anything".
If so, what does it send.
If that's correct then that is the point you go to the server and see what the servlet is doing with the request.

If it's not sending the correct thing (or anything at all) you then need to look at the HTML on the browser, and possibly debug Javascript if there's any processing before making a request to the server.
That HTML (and any associated script) will determine what is happening.

So, from what you posted earlier it looks like it's not making a request.
So you need to look at the actual HTML.
Until you determine what is not correct in that then there is little point peering at JSP tags.

Thank you, so much, Dave. I followed what you said and I achieved what I want

[Asif Haciyev]

Could you check my code? Did I do in the right way?
This is HTML on the browser:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Servers Information</title>
    <link rel="stylesheet" href="/resources/static/css/servers-info.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div>
    
    <div class="table-wrapper">
        <div class="table-title">
            <div class="row">
                <div class="col-sm-4">
                    <h2>Manage <b>Servers</b></h2>
                </div>
                <div class="col-sm-3">
                    <div class="search-box">
                        <i class="material-icons"></i>
                        <form action="/servers-info/search?searchField=&pageNumber=">
                            <input type="text" class="form-control" placeholder="Search…" name="searchField" autofocus>
                        </form>
                    </div>
                </div>
                <div class="col-sm-5">
                    <a href="#add-or-create" class="btn btn-success" data-toggle="modal" id="add"><i
                            class="material-icons"></i>
                        <span>Add New Server</span></a>
                    <a class="btn btn-danger" data-toggle="modal" id="delete-selected"
                       data-url="/servers-info/delete-selected?id=">
                        <i class="material-icons"></i>
                        <span>Delete Selected Servers</span></a>
                </div>
            </div>
        </div>
        <form method="post" action="">
            <table class="table table-striped table-bordered table-hover">
                
                <thead>
                <tr>
                    <th>
		        <span class="custom-checkbox">
			      <input type="checkbox" class="check-bx" id="selectAll">
			      <label for="selectAll"></label>
			</span>
                    </th>
                    <th>IP</th>
                    <th>Username</th>
                    <th>Password</th>
                    <th>Prj Name</th>
                    <th>Description</th>
                    <th>MySQL User</th>
                    <th>MySQL Psw</th>
                    <th>MySQL R User</th>
                    <th>MySQL R Psw</th>
                    <th>Actions</th>
                </tr>
                </thead>
                
                <tbody>
                
                    
                        <tr>
                            <td>
                                <span class="custom-checkbox">
                                <input type="checkbox" class="check-bx option" id="4.4.4.4"
                                       name="checkbox-server"
                                       value="80">
                                    <label for="4.4.4.4"></label>
                                </span>
                            </td>

                            <td>4.4.4.4</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a  href="servers-info/server?id=80"
                                   class="edit" data-toggle="modal" id="edit">
                                    <i class="material-icons"
                                       data-toggle="tooltip"
                                       title="Edit"></i>
                                </a>
                                <a href="/servers-info/delete?id=80"
                                   class="delete" data-toggle="modal" id="delete">
                                    <i class="material-icons"
                                       data-toggle="tooltip"
                                       title="Delete"></i>
                                </a>
                            </td>
                        </tr>
                    
                        <tr>
                            <td>
                                <span class="custom-checkbox">
                                <input type="checkbox" class="check-bx option" id="3.3.3.3"
                                       name="checkbox-server"
                                       value="79">
                                    <label for="3.3.3.3"></label>
                                </span>
                            </td>

                            <td>3.3.3.3</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a  href="servers-info/server?id=79"
                                   class="edit" data-toggle="modal" id="edit">
                                    <i class="material-icons"
                                       data-toggle="tooltip"
                                       title="Edit"></i>
                                </a>
                                <a href="/servers-info/delete?id=79"
                                   class="delete" data-toggle="modal" id="delete">
                                    <i class="material-icons"
                                       data-toggle="tooltip"
                                       title="Delete"></i>
                                </a>
                            </td>
                        </tr>
                    
                        <tr>
                            <td>
                                <span class="custom-checkbox">
                                <input type="checkbox" class="check-bx option" id="2.2.2.2"
                                       name="checkbox-server"
                                       value="78">
                                    <label for="2.2.2.2"></label>
                                </span>
                            </td>

                            <td>2.2.2.2</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a  href="servers-info/server?id=78"
                                   class="edit" data-toggle="modal" id="edit">
                                    <i class="material-icons"
                                       data-toggle="tooltip"
                                       title="Edit"></i>
                                </a>
                                <a href="/servers-info/delete?id=78"
                                   class="delete" data-toggle="modal" id="delete">
                                    <i class="material-icons"
                                       data-toggle="tooltip"
                                       title="Delete"></i>
                                </a>
                            </td>
                        </tr>
                    
                        <tr>
                            <td>
                                <span class="custom-checkbox">
                                <input type="checkbox" class="check-bx option" id="1.1.1.1"
                                       name="checkbox-server"
                                       value="77">
                                    <label for="1.1.1.1"></label>
                                </span>
                            </td>

                            <td>1.1.1.1</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <a  href="servers-info/server?id=77"
                                   class="edit" data-toggle="modal" id="edit">
                                    <i class="material-icons"
                                       data-toggle="tooltip"
                                       title="Edit"></i>
                                </a>
                                <a href="/servers-info/delete?id=77"
                                   class="delete" data-toggle="modal" id="delete">
                                    <i class="material-icons"
                                       data-toggle="tooltip"
                                       title="Delete"></i>
                                </a>
                            </td>
                        </tr>
                </tbody>
            </table>
        </form>
        
    </div>
    
    <div class="clearfix">
  
                <ul class="pagination">
                    <li class="page-item">
                        
                    </li>
                    
                        <li class="page-item">

                                    <a href="?pageNumber=1 "
                                       class="page-link"
                                       style="background-color:#03A9F4; color:white; cursor:text">1</a>
                    
                        </li>
                    
                    <li class="page-item">
                        
                    </li>
                </ul>
            
        
    </div>
</div>
</div>


<div id="add-or-create" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="form" action="/save" method="post">
                <div class="modal-header">
                    <h3 class="modal-title">Add new Server</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <div id="error-message" style="margin-top: 20px; text-align: center"></div>
                </div>
                <div class="modal-body">
                    <input id="id" name="id" type="hidden" value=""/>
                    <div class="form-group">
                        <label for="ip">IP</label>
                        <input id="ip" name="ip" class="form-control" required="ip" onfocus="removedError('ipError')" type="text" value=""/>
                        <span id="ipError" style="color: red; font-size: medium"></span>
                    </div>
                    <div class="form-group">
                        <label for="username">Username</label>
                        <input id="username" name="username" class="form-control" type="text" value=""/>
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input id="password" name="password" class="form-control" type="text" value=""/>
                    </div>
                    <div class="form-group">
                        <label for="projectName">Prj Name</label>
                        <input id="projectName" name="projectName" class="form-control" type="text" value=""/>
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
                        <input id="description" name="description" class="form-control" type="text" value=""/>
                    </div>
                    <div class="form-group">
                        <label for="mysqlUser">MySQL User</label>
                        <input id="mysqlUser" name="mysqlUser" class="form-control" type="text" value=""/>
                    </div>
                    <div class="form-group">
                        <label for="mysqlPassword">MySQl Psw</label>
                        <input id="mysqlPassword" name="mysqlPassword" class="form-control" type="text" value=""/>
                    </div>
                    <div class="form-group">
                        <label for="mysqlRemoteUser">MySQL R User</label>
                        <input id="mysqlRemoteUser" name="mysqlRemoteUser" class="form-control" type="text" value=""/>
                    </div>
                    <div class="form-group">
                        <label for="mysqlRemotePassword">MySQL R Password</label>
                        <input id="mysqlRemotePassword" name="mysqlRemotePassword" class="form-control" type="text" value=""/>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <input type="submit" class="btn btn-success" value="Save" onclick="return validate()">
                </div>
            </form>
        </div>
    </div>
</div>

<div id="deleteServer" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="post" id="delete-form">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Server</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this Record?</p>
                    <p class="text-warning"><small>This action cannot be undone.</small></p>
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                    <input type="submit" class="btn btn-danger" id="deleteBtn" value="Delete">
                </div>
            </form>
        </div>
    </div>
</div>

<script src="/resources/static/js/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

This is JavaScript:

    /*when clicking to edit button fill the input fields*/
    $(document).ready(function () {
        $('.table .edit').on('click', function (e) {
            $('#add-or-create').modal('show');
            e.preventDefault();
            const href = $(this).attr('href');
            $.get(href, function (server, status) {
                $('#id').val(server.id);
                $('#ip').val(server.ip);
                $('#username').val(server.username);
                $('#password').val(server.password);
                $('#projectName').val(server.projectName);
                $('#description').val(server.description);
                $('#mysqlUser').val(server.mysqlUser);
                $('#mysqlPassword').val(server.mysqlPassword);
                $('#mysqlRemoteUser').val(server.mysqlRemoteUser);
                $('#mysqlRemotePassword').val(server.mysqlRemotePassword);
            });
        });
    });

    /*to delete single row by the button on it*/
    $('.table .delete').on('click', function (e) {
        $('#deleteServer').modal('show');
        let href = $(this).attr('href');
        $('#delete-form').attr('action', href);
        e.preventDefault();
    });

    /*to delete selected rows*/
    $('#delete-selected').on('click', function (e) {
        $('#deleteServer').modal('show');
        const selectedCheckboxes=[];
        $('input:checkbox[name=checkbox-server]:checked').each(function() {
            selectedCheckboxes.push($(this).val());
        });
        $('#delete-selected').attr('data-url',"servers-info/delete-selected?id="+selectedCheckboxes);
        let href = $(this).attr('data-url');
        $('#delete-form').attr('action', href);
        e.preventDefault();
    });

    /*when modal opens make focus on first input*/
    $('#add-or-create').on('shown.bs.modal', function () {
        $('#ip').focus();
    });

And this is my controller:

 @PostMapping("servers-info/delete-selected")
    public String deleteSelected(@RequestParam(name = "id") String[] id,HttpServletRequest request) {
        System.out.println("Inside method");
        for(String s:id){
            serverService.deleteById(Integer.parseInt(s));
        }
        return "redirect:/servers-info";
    }

[Dave Tolls]

Does it work?
And is it easy to read?

That's pretty much my definition of "OK".

[Asif Haciyev]

Dave Tolls wrote:Does it work?
And is it easy to read?

That's pretty much my definition of "OK".

Yes, it works.
Yes.
Thank you, Dave.