Pagination not Working. How to Resolve?

Question

0.00/5 (No votes)

See more:

I have been pampering this problem for 3 days now. Can someone help me?

I am using these plug-ins in my .ASPX file:

HTML

<script src="js/external/ajax/json2.js" type="text/javascript"></script>
<script src="js/external/ajax/prototype.js" type="text/javascript"></script>

<script src="js/external/jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/external/jquery.js"></script>

<script src="js/ajaxfunctions/orderstatus.js" type="text/javascript"></script>
<script src="js/ajaxfunctions/ajaxfunctions.js" type="text/javascript"></script>

<script src="js/external/jquery/jquery-ui.js" type="text/javascript"></script>
<script src="js/external/dataTable/jquery.dataTables.js" type="text/javascript"></script>

And I want to add pagination to the table. Here are some of the jQuery in the page:

JavaScript

jQuery.noConflict();
        jQuery(function () {
            jQuery("#datepicker").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
        jQuery(document).ready(function() {
				jQuery('#statusTable').dataTable();
			});
        jQuery(window).load(function () {
            initializeComponents();
        });

I do not know why it is not working. Please don't hesitate to ask more questions about the problem. Thanks in advance.

Posted 27-Jan-14 23:29pm

mitchiee1226

Updated 2-Sep-16 0:51am

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mulla Rameez · Accepted Answer · 2014-01-27T23:43:00

Solution 1

First Add the jQuery Script Files :

Add JqueryUI css files

Other Scripts :

The Jquery Coding which you have done, seem to be correct...

Posted 27-Jan-14 23:43pm

Mulla Rameez

Comments

mitchiee1226 28-Jan-14 5:50am

I have added the scripts in correct order. Here are the css files in my .aspx file:

<link rel="stylesheet" href="css/stylesheet.css" />
<link rel="Stylesheet" href="css/bootstrap.css" type="text/css"/>
<link rel="Stylesheet" href="css/bootstrap-responsive.min.css" type="text/css" />
<link rel="Stylesheet" href="css/bootstrap-responsive.css" type="text/css" />
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css"/> <---- This seems to be the JqueryUI file you are looking for.
<link rel="stylesheet" href="css/dataTable/demo_page.css" type="text/css"/>
<link rel="stylesheet" href="css/dataTable/demo_table.css" type="text/css"/>

Mulla Rameez 28-Jan-14 5:54am

Scripts or Css files
which is the one you have added first.

mitchiee1226 28-Jan-14 21:00pm

To what it is shown in the comment, that is the sequence of how I added it.

jqueryaspnet · Accepted Answer · 2014-12-30T17:29:00

Pagination is frequently set up using server-side programming languages like PHP, ASP.NET, and Java . The major benefit to using a server-side solution is the Web page doesn’t need to load all of the records at once; they are loaded only when the user requests them. You can use jQuery to set up pagination, but I recommend doing it to paginate only results that aren’t heavy-loading ( where there are more than 100 results ), which could weigh the page loading time down considerably.

If your skills are advanced enough, you can build jQuery that loads only 10 results and, each time a page is clicked, that content is loaded via Ajax and inserted into the current page.

Refer : pagination using jquery example

kalsa · Accepted Answer · 2016-09-02T00:51:00

See this example.

HTML

<!DOCTYPE html>   
<html lang="en">   
<head>   
<meta charset="utf-8">   
<title>Example of Employee Table with twitter bootstrap</title>   
<meta name="description" content="Creating a Employee table with Twitter Bootstrap. Learn with example of a Employee Table with Twitter Bootstrap.">  
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>  
<body style="margin:20px auto">  
<div class="container">
<div class="row header" style="text-align:center;color:green">
<h3>Bootstrap Table With sorting,searching and paging using dataTable.js (Responsive)</h3>
</div>
<table id="myTable" class="table table-striped" >  
        <thead>  
          <tr>  
            <th>ENO</th>  
            <th>EMPName</th>  
            <th>Country</th>  
            <th>Salary</th>  
          </tr>  
        </thead>  
        <tbody>  
          <tr>  
            <td>001</td>  
            <td>Anusha</td>  
            <td>India</td>  
            <td>10000</td>  
          </tr>  
          <tr>  
            <td>002</td>  
            <td>Charles</td>  
            <td>United Kingdom</td>  
            <td>28000</td>  
          </tr>  
          <tr>  
            <td>003</td>  
            <td>Sravani</td>  
            <td>Australia</td>  
            <td>7000</td>  
          </tr>  
		   <tr>  
            <td>004</td>  
            <td>Amar</td>  
            <td>India</td>  
            <td>18000</td>  
          </tr>  
          <tr>  
            <td>005</td>  
            <td>Lakshmi</td>  
            <td>India</td>  
            <td>12000</td>  
          </tr>  
          <tr>  
            <td>006</td>  
            <td>James</td>  
            <td>Canada</td>  
            <td>50000</td>  
          </tr>  
		  
		   <tr>  
            <td>007</td>  
            <td>Ronald</td>  
            <td>US</td>  
            <td>75000</td>  
          </tr>  
          <tr>  
            <td>008</td>  
            <td>Mike</td>  
            <td>Belgium</td>  
            <td>100000</td>  
          </tr>  
          <tr>  
            <td>009</td>  
            <td>Andrew</td>  
            <td>Argentina</td>  
            <td>45000</td>  
          </tr>  
		  
		    <tr>  
            <td>010</td>  
            <td>Stephen</td>  
            <td>Austria</td>  
            <td>30000</td>  
          </tr>  
          <tr>  
            <td>011</td>  
            <td>Sara</td>  
            <td>China</td>  
            <td>750000</td>  
          </tr>  
          <tr>  
            <td>012</td>  
            <td>JonRoot</td>  
            <td>Argentina</td>  
            <td>65000</td>  
          </tr>  
        </tbody>  
      </table>  
	  </div>
</body>  
<script>
$(document).ready(function(){
    $('#myTable').dataTable();
});
</script>
</html>

Pagination not Working. How to Resolve?

3 solutions

Solution 1

Solution 3

Solution 4

Add your solution here

Preview 0