Pagination on PopUp Window

puneet kumar
puneet kumar used Ask the Experts™
on
Hi Team, my popup code is below please let me know how to do pagination on popup window.

<script>
		jQuery(function($) {
		   $(".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 listOfCheckbox = [];
					   var trs = ["<tr><td>ID</td><td>NAME</td></tr>"];
					   $(":checkbox", this).each(function() {
						   // your checkbox must be like
						   // <input type="checkbox" data-id="123" data-name="someName" value="456" />
                           trs.push("<tr><td>" + $(this).data("id") + "</td><td>" + $(this).data("name") + "</td></tr>");
						   listOfCheckbox.push({employeeID: $(this).data("id"), employeeName: $(this).data("name")})
					   });
					   // checking
					   alert(JSON.stringify(listOfCheckbox));
                       $("#putMyEmployeeInfosHere").html( "<table>" + trs.join("") + "</table>" );
					   $("#myModal").hide();
				   });
			   });
		   });
		});
	</script>

Open in new window



please let me know solution asap.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.
puneet kumarSenior Software Engineer

Author

Commented:
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.
CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

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.
puneet kumarSenior Software Engineer

Author

Commented:
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?
puneet kumarSenior Software Engineer

Author

Commented:
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.
leakim971Multitechnician
Top Expert 2014

Commented:
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>

Open in new window

puneet kumarSenior Software Engineer

Author

Commented:
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 .
puneet kumarSenior Software Engineer

Author

Commented:
leakim971 lekim i have done the same as you told me but its not working . do you need any thing to check.
leakim971Multitechnician
Top Expert 2014

Commented:
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
puneet kumarSenior Software Engineer

Author

Commented:
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
leakim971Multitechnician
Top Expert 2014

Commented:
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>

Open in new window

puneet kumarSenior Software Engineer

Author

Commented:
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
leakim971Multitechnician
Top Expert 2014

Commented:
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>

Open in new window

puneet kumarSenior Software Engineer

Author

Commented:
not getting desire result please check with attached file .
index.jsp
popup.jsp
leakim971Multitechnician
Top Expert 2014

Commented:
not getting desire result please check with attached file .

what do you want, what is missing?
puneet kumarSenior Software Engineer

Author

Commented:
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.
leakim971Multitechnician
Top Expert 2014

Commented:
could you do a screenshot of the datatables and confirm it look fine so just miss the checkbox thing
puneet kumarSenior Software Engineer

Author

Commented:
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
leakim971Multitechnician
Top Expert 2014

Commented:
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>

Open in new window

puneet kumarSenior Software Engineer

Author

Commented:
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.
puneet kumarSenior Software Engineer

Author

Commented:
any update on above?
leakim971Multitechnician
Top Expert 2014

Commented:
and I supposed you want to see what you checked previously after closing the "popup" and reopen it, right?
leakim971Multitechnician
Top Expert 2014

Commented:
could you confirm my previous comment?
Senior Software Engineer
Commented:
my click function is out of $("form", "#divForCSSPopup").submit(function(event) function so i update it and make it inside the function its working properly.Thank you leakim.
leakim971Multitechnician
Top Expert 2014

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial