Pagination on PopUp Window

A popup - assuming it uses styled elements as opposed to opening a new window - is just an element on the page no different from any other. It just looks like it is separate because of styling.

The most common approach is to use DataTables. Let DataTables handle the table data - including pagination.

Hi,

I would not put a form inside a Table, these days we don't do that anymore.

If you need a form inside a table, like an inline form for example or with a popup or buble
I would use Datatables editor https://editor.datatables.net/examples/index
The editor allow to keep all Datatables widget and use a form at the same time, otherwise doing it on your own will result breaking the Datatables.

Without the editor what I usually do is to have the form on another place outside the Datatables or most of the time when the form is big I put it on another page.
I don't like to use popup because it hard to display it on mobile view especialy if the form is long.

Hi All,

when i am calling datatable in my popup.jsp its working fine but one issue is there when i am calling popup.jsp from parent.jsp ,first my popup.jsp will open after some time datatable load please let me know how to solve my problem.

Hi,

It make sense that it may take sometime to load if you are loading a Datatables table in a popup.
I would not load a Datatatbles table in a popup, this is not user friendly and it won't display well in smaller view..

Also check if you have any error in console, using Chrome right click inspect.

so what you suggested and guide please let me know .

Why are you loading the table in a popup and not just display it on the page?

onse scenario is there one parent.jsp page is there where a button is there . after clicking one popup is open previously i tried to open jsp page on click button
but but i failed to retrieve value from popup jsp page to parent.jsp .then i use model popup to do the same . when popup open all value from one database table
come to display on the page . in popup.jsp there is a checkbox in each and every row after selecting every line id display on parent.jsp.

let me know if something is not clear or need more explanation.

Hi,

This is still not clear to me because you first ask about pagination, then you said that is loading the table in popup but it's take some time to load and now you say that you are not getting the data from parent...

So this is confusing.....

What you can do is to display the data that should appear in the popup directly on the page first,
so when it work fine from there you will be able to display the data  in popup.

Also check if you have any error in console, using Chrome right click inspect.
Check in your server log for any errors.

You may use : https://datatables.net/

    <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>
        jQuery(function($) {
            $(document).on("click", ".close", function(event) {
                event.preventDefault();
                $("#myModal").hide();
            });
            $(".openPopup").on("click", function(event) {
                event.preventDefault();
                $("#myModal").show();
                $("#divForCSSPopup").load("/path/to/your/page.jsp body", function() {
                    $("form", "#divForCSSPopup").submit(function(event) {
                        event.preventDefault();
                        var trs = ["<tr><td>ID</td><td>NAME</td></tr>"];
                        $(":checkbox", this).each(function() {
                            trs.push("<tr><td>" + $(this).data("id") + "</td><td>" + $(this).data("name") + "</td></tr>");
                        });
                        // checking
                        $("#putMyEmployeeInfosHere").html( "<table>" + trs.join("") + "</table>" );
                        $("table", "#putMyEmployeeInfosHere").DataTable();
                        $("#myModal").hide();
                    });
                });
            });
        });
    </script>

Select allOpen in new window

hey leamtl you asked me that  Why are you loading the table in a popup so i answered that first i tried with open a jsp page on click and do the operation but it would't work for me then i open a model popup the load jsp on it it works .

i think you are confusing me what you questioned i answered .

leakim971 lekim i have done the same as you told me but its not working . do you need any thing to check.

after you get the table in the page
do a right on the table, choose inspect, locate the table in the right window, do a right click on it and choose copy OuterHTML
thanks

i leakim did't get where i am wrong please help me out on this asap.i have uploaded my index.jsp(Parent.jsp) and popup.jsp.please check and let me know asap.
index.jsp
popup.jsp

use (check the ID of the table) : $("#example").DataTable();

    <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>
        jQuery(function($) {
            $(document).on("click", ".close", function(event) {
                event.preventDefault();
                $("#myModal").hide();
            });
            $(".openPopup").on("click", function(event) {
                event.preventDefault();
                $("#myModal").show();
                $("#divForCSSPopup").load("/path/to/your/page.jsp body", function() {
                    $("form", "#divForCSSPopup").submit(function(event) {
                        event.preventDefault();
                        var trs = ["<tr><td>ID</td><td>NAME</td></tr>"];
                        $(":checkbox", this).each(function() {
                            trs.push("<tr><td>" + $(this).data("id") + "</td><td>" + $(this).data("name") + "</td></tr>");
                        });
                        // checking
                        $("#putMyEmployeeInfosHere").html( "<table>" + trs.join("") + "</table>" );
                        $("#example").DataTable();
                        $("#myModal").hide();
                    });
                });
            });
        });
    </script>

Select allOpen in new window

Hi leakim i have done the same thing what you suggested i am attaching my parent.jsp and popup.jsp . its not displaying Employee_ID and Employee_Name on parent.jsp.please check where i am wrong.
index.jsp
popup.jsp

the following remplace the current table by this one :

    <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>
        jQuery(function($) {
            $(document).on("click", ".close", function(event) {
                event.preventDefault();
                $("#myModal").hide();
            });
            $(".openPopup").on("click", function(event) {
                event.preventDefault();
                $("#myModal").show();
                $("#divForCSSPopup").load("/path/to/your/page.jsp body", function() {
                    $("form", "#divForCSSPopup").submit(function(event) {
                        event.preventDefault();
                        var trs = ["<tr><td>ID</td><td>NAME</td></tr>"];
                        $(":checkbox", this).each(function() {
                            trs.push("<tr><td>" + $(this).data("id") + "</td><td>" + $(this).data("name") + "</td></tr>");
                        });
                        // checking
                        $("#example").html( "<table>" + trs.join("") + "</table>" );
                        $("#example").DataTable();
                        $("#myModal").hide();
                    });
                });
            });
        });
    </script>

Select allOpen in new window

not getting desire result please check with attached file .
index.jsp
popup.jsp

not getting desire result please check with attached file .

what do you want, what is missing?

after using datatable when i m selecting values from popup.jsp through checkbox and submitting Emplyee_ID and Emplyee_Name is not displaying to parent.jsp.

could you do a screenshot of the datatables and confirm it look fine so just miss the checkbox thing

everything is ok but if data table having 5 rows and i checked only 3 and submit all the rows are displaying on parent.jsp. files are attached
index.jsp
popup.jsp

Hi,

here how row selector work with Datatables
https://datatables.net/reference/type/row-selector

if no selector given you will get all row so you need to use one of the selector

here the new parent.jsp code, we just need to use :  $(":checkbox:checked", this).each(function() {
to get checked checkboxes

<!DOCTYPE html>
<html>
<head>
<style>
/* https://www.w3schools.com/howto/howto_css_modals.asp */
/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	background-color: #fefefe;
	margin: 15% auto; /* 15% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover, .close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>
        jQuery(function($) {
            $(document).on("click", ".close", function(event) {
                event.preventDefault();
                $("#myModal").hide();
            });
            $(".openPopup").on("click", function(event) {
                event.preventDefault();
                $("#myModal").show();
                $("#divForCSSPopup").load("popup.jsp", function() {
                    $("form", "#divForCSSPopup").submit(function(event) {
                        event.preventDefault();
                        var trs = ["<tr><td>ID</td><td>NAME</td></tr>"];
                        $(":checkbox:checked", this).each(function() {
                            trs.push("<tr><td>" + $(this).data("id") + "</td><td>" + $(this).data("name") + "</td></tr>");
                        });
                        // checking
                        $("#example").DataTable();
                        $("#putMyEmployeeInfosHere").html( "<table>" + trs.join("") + "</table>" );
                        
                        $("#myModal").hide();
                    });
                });
            });
        });
    </script>
</head>
<body>
	<button class="openPopup">OPEN POPUP</button>
	<div id="myModal" class="modal">
		<div class="modal-content">
			<span class="close">&times;</span>
			<p>
			<div id="divForCSSPopup"></div>
			</p>
		</div>
	</div>
	<div id="putMyEmployeeInfosHere"></div>
</body>
</html>

Select allOpen in new window

Hi Leakim one more problem comes in pagination data is displaying well but suppose there is 10 pages come in datatable . for checkbox i select 3 row from 2nd page and 5 row from 9th page after that click on submit button . only last page selected data come to parent.jsp . as per avove example 9th page 5 row data are displaying  on parent.jsp not 2nd page 3 rows not displaying.

any update on above?

and I supposed you want to see what you checked previously after closing the "popup" and reopen it, right?

could you confirm my previous comment?

so you accepted your own answer instead one providing the code you're using at 95% after no feedback