Solved

paging through a multidimensional php array with javascript

Posted on 2014-03-29
33
573 Views
Last Modified: 2014-03-31
Not sure which tech is available for this.  I am trying to create a paging script for the multidimensional array printed below.

I am running jQuery v1.11.0.  I created an array via php as listed below.   I listed the array as follows:

 foreach ($titles_list as $obj_key =>$title)
                               
       {
              extract($title);
                                    echo "<li class='mix filter-$titletype_idkey' data-id='$obj_key'>";
                                    echo '<div class="cmanager-ctrls">';
                                    etc..     etc..

And I now have all records listed.  I would like to create a paging script 5 records or 10 records etc...  at a time and page through them via ajax or jquery.

Any thoughts or ideas?

The array is printed below...

Array
(
    [0] => Array
        (
            [title_id] => 19
            [createdate] => 2011-04-28 07:49:06
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 2
            [title] => Penguin
            [title_tag] => 
            [description] => 
           
        )

    [1] => Array
        (
            [title_id] => 20
            [createdate] => 2011-04-28 14:22:45
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 2
            [title] => Penguin 2
            [title_tag] => 
            [description] => Re-test
          
        )

    [2] => Array
        (
            [title_id] => 21
            [createdate] => 2011-05-02 14:05:14
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 2
            [title] => Web
            [title_tag] => 
            [description] => 
         
        )

    [3] => Array
        (
            [title_id] => 22
            [createdate] => 2011-05-03 08:03:48
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 2
            [title] => wildlife
            [title_tag] => 
            [description] => Wildlife video
        
        )

    [4] => Array
        (
            [title_id] => 26
            [createdate] => 2011-05-04 15:40:35
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 1
            [title] => taipei
            [title_tag] => 
            [description] => 
          
        )

    [5] => Array
        (
            [title_id] => 27
            [createdate] => 2011-05-17 09:38:19
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 0
            [title] => youtube
            [title_tag] => 
            [description] => test
          
        )

    [6] => Array
        (
            [title_id] => 28
            [createdate] => 2011-05-17 09:42:22
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 0
            [title] => testypt
            [title_tag] => 
            [description] => test
           
        )

    [7] => Array
        (
            [title_id] => 36
            [createdate] => 2011-05-20 10:16:26
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 0
            [title] => Test youtube
            [title_tag] => 
            [description] => test
         
        )

    [8] => Array
        (
            [title_id] => 37
            [createdate] => 2011-05-20 11:58:50
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 2
            [title] => Ostone video
            [title_tag] => 
            [description] => 
         
        )

    [9] => Array
        (
            [title_id] => 38
            [createdate] => 2011-05-20 12:36:56
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 0
            [title] => youtube test
            [title_tag] => 
            [description] => youtube test
       
        )

    [10] => Array
        (
            [title_id] => 39
            [createdate] => 2011-05-23 13:21:56
            [statusidkey] => 1
            [categoryidkey] => 0
            [titletype_idkey] => 0
            [title] => not reuploaded
            [title_tag] => 
            [description] => test
     
        )

    [11] => Array
        (
            [title_id] => 41
            [createdate] => 2011-05-23 13:31:46
            [statusidkey] => 1
            [categoryidkey] => 0
            [titletype_idkey] => 0
            [title] => rere
            [title_tag] => 
            [description] => rere
    
        )

    [12] => Array
        (
            [title_id] => 42
            [createdate] => 2011-05-23 13:51:27
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 0
            [title] => rere2
            [title_tag] => 
            [description] => rere2
       
        )

    [13] => Array
        (
            [title_id] => 43
            [createdate] => 2011-05-23 13:56:20
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 0
            [title] => rere3
            [title_tag] => 
            [description] => rere3
   
        )

    [14] => Array
        (
            [title_id] => 44
            [createdate] => 2011-05-23 14:00:20
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 0
            [title] => Youtube penguin
            [title_tag] => 
            [description] => test
        )

    [15] => Array
        (
            [title_id] => 45
            [createdate] => 2012-09-12 00:41:20
            [statusidkey] => 0
            [categoryidkey] => 0
            [titletype_idkey] => 1
            [title] => title
            [title_tag] => 
            [description] => desc

        )

)

Open in new window

0
Comment
Question by:morako
  • 21
  • 7
  • 3
  • +1
33 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39964335
At EE, the experts exchange answers and advice for points.  If you look at the questions awaiting answers in this zone, you will see a lot of 500 point questions.  Your question is competing for the experts' attention among those high-point questions.  So as a matter of simple economics you might be able to envision which questions will get the experts' attention first.   Just a thought.

Paging in PHP is illustrated in this SitePoint article.

If you're not familiar with the division of labor between client and server, this article may be helpful.  JavaScript is client side, PHP is server side.  PHP runs and is complete (the server is dormant) before the client side starts work.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/A_11271-Understanding-Client-Server-Protocols-and-Web-Applications.html
0
 

Author Comment

by:morako
ID: 39964352
Ray thanks for the input on the points.  I will adjust..  I saw the example on SitePoint.  I have that part of the php code covered.  I can page through a php script.  What I am trying to achieve is to load the complete array and page the data without reloading the page using jquery or ajax.  I have done this before with an xml feed drawn up with php and using SPRY to page on a tableset.  Now I am trying to page through an array being dis[played as list items via ajax or jquery.
0
 

Author Comment

by:morako
ID: 39964385
So in other words, I have all my data listed in a  list view.

<ul><li></li></ul>

and I would like to use a scripting language or code to page through the records.
0
 
LVL 33

Expert Comment

by:Slick812
ID: 39964403
greetings morako, the PHP array you show has only 15 elements of arrays, this is much to small a data set to ajax the server, you should write the array as a Javascript Array variable with 15 JS objects in the PHP page source, then just do the javascript (function maybe) and extract and html format 5 -
<li class='mix filter-2 data-id='red'>
from the JS array.
Would you need help writing this in PHP?
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39964409
This is really more of a front end question than php.   There are a lot of paging plug ins you can use.  Even just listed on the jquery site https://plugins.jquery.com/tag/paging/.

If you have a lot of tabular data, I have used datatables a lot https://datatables.net/ and there is an option that allows you to grab your data via ajax https://datatables.net/release-datatables/examples/data_sources/ajax.html or ajax via your php code https://datatables.net/release-datatables/examples/data_sources/server_side.html

Datatables does have a bit of a learning curve, but I have found it very useful.  

If you are just using a sample one column list of <li> tags, there are going to be some options that will not be as complex.  How do you want your output to look?
0
 

Author Comment

by:morako
ID: 39964417
This is a screenshot of the layout I have for my dataset.  I am displaying the records as list items. There can be many records per user so I would like to page them in increments of a user selected dropdown 5, 10, 20, 50, 100, All  etc...  A already formatted grid would not work as it would use a table and take away from my layour.  So you can see the id and classes uses in the list items I will put a few records below.  
So basically I am thinking a jquery function to page these items using the paging items listed below the list items.

<ul id="mix-1" class="cmanager-list pager">
<li class="mix filter-2 mix_all" data-id="0" style="display: inline-block; opacity: 1;">
<li class="mix filter-2 mix_all" data-id="1" style="display: inline-block; opacity: 1;">
<li class="mix filter-2 mix_all" data-id="2" style="display: inline-block; opacity: 1;">
<li class="mix filter-2 mix_all" data-id="3" style="display: inline-block; opacity: 1;">
<li class="mix filter-1 mix_all" data-id="4" style="display: inline-block; opacity: 1;">
<li class="mix filter-0 mix_all" data-id="5" style="display: inline-block; opacity: 1;">


<button class="btn first"><i class="fa fa-step-backward"></i></button>
                                <button class="btn prev"><i class="fa fa-arrow-left"></i></button>
                                <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
                                <button class="btn next"><i class="fa fa-arrow-right"></i></button>
                                <button class="btn last"><i class="fa fa-step-forward"></i></button>
                                <select class="pagesize input-xs" title="Select page size">
                                    <option selected="selected" value="5">5</option>
                                    <option value="10">10</option>
<option value="20">20</option>
                                    <option value="50">50</option>
                                    <option value="100">100</option>
<option value="All">All</option>
                                </select>
                                <select class="pagenum input-xs" title="Select page number"></select>
grid.JPG
0
 

Author Comment

by:morako
ID: 39964420
I have included a screen shot of what they currently look like and a list of list items with their id and class tags as currently displayed.  the layout is already working nicely.
0
 

Author Comment

by:morako
ID: 39964419
Scott,  I am going to into some of the documentation urls you sent over to see if I can apply any of the thought methods explained there, if anyone has a more direct solution I would be happy to hear it.  otherwise give me a day to review the listed options and examples and see if i can make use of them.   thanks in advance.
0
 

Author Comment

by:morako
ID: 39964421
This nis a screenshot of what I would like to see if I had a working paging script.
grid1.JPG
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39964728
This is a very simple paging (no page refresh) I modified from http://www.script-tutorials.com/demos/35/index.html# with a working sample using <li> tags http://jsbin.com/wufigude/1/edit?html,output

It is pretty bare bones and will need some style though.

<!DOCTYPE html>
<html>
<head>
<style>
  #pagingControls ul{display:inline;padding-left:0.5em}
#pagingControls li{display:inline;padding:0 0.5em}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

  <script src="http://jsbin.com/jopiveyo/1.js"></script>
  <script>
    $(function () {
    var foo = new Array(200);
    for (var i = 0; i < foo.length; i++) {
        $('ul').append('<li class="list">' + i + '</li>');
    }


});
var pager = new Imtech.Pager();
$(function () {


    pager.paragraphsPerPage = 10; // set amount elements per page
    pager.pagingContainer = $('#content'); // set of main container
    pager.paragraphs = $('li.list', pager.pagingContainer); // set of required containers
    pager.showPage(1);
});
    </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="content">
<ul id="myUL">
 <!-- foo -->
</ul>
  </div>
  <div id="pagingControls"></div>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:morako
ID: 39964731
Look at this demo:

http://ddenhartog.github.io/jquery-simple-pagination/

The samples on this page are great, except they only seem to work for tables,
<table>
            <tbody>
                  <!--http://www.marijn.org/everything-is-4/counting-0-to-100/english/-->
                  <tr><td>One</td></tr>
                  <tr><td>Two</td></tr>
                  <tr><td>Three</td></tr>
etc...

I need this to work for lists..
<ul>
                  <li>One</li>
                  <li>Two</li>
                  <li>Three</li>
etc....
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39964784
>I need this to work for lists..

That sample only works for tables

see http:#a39964728
0
 

Author Comment

by:morako
ID: 39964788
True Scott, I am currently testing with your sample..  and seeing if it works within my application.   be back shortly...   ;-)
0
 

Author Comment

by:morako
ID: 39964814
Scott I am trying to make this list work within your code..  With no success...  Any thoughts.  

<!DOCTYPE html>
<html>
<head>
<style>
  #pagingControls ul{display:inline;padding-left:0.5em}
#pagingControls li{display:inline;padding:0 0.5em}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

  <script src="http://jsbin.com/jopiveyo/1.js"></script>
  

  <script>
    //$(function () {
    //var foo = new Array(200);
    //for (var i = 0; i < foo.length; i++) {
        $('#ul').append('<li class=""mix">' + i + '</li>');
    //}


//});
var pager = new Imtech.Pager();
$(function () {


    pager.paragraphsPerPage = 10; // set amount elements per page
    pager.pagingContainer = $('#mix-1'); // set of main container
    pager.paragraphs = $('li.list', pager.pagingContainer); // set of required containers
    pager.showPage(1);
});
    </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 
  <ul class="cmanager-list pager" id="mix-1"><!-- //  main container -->
                                
                                <li class="mix filter-2 mix_all" data-id="0" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Penguin</h5><ul><li><strong>Date:</strong> 2011-04-28 07:49:06</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="1" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=20"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=20" class="lightbox-iframe" title="Penguin 2"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Penguin 2</h5><ul><li><strong>Date:</strong> 2011-04-28 14:22:45</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="2" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=21"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=21" class="lightbox-iframe" title="Web"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Web</h5><ul><li><strong>Date:</strong> 2011-05-02 14:05:14</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="3" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=22"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=22" class="lightbox-iframe" title="wildlife"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">wildlife</h5><ul><li><strong>Date:</strong> 2011-05-03 08:03:48</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-1 mix_all" data-id="4" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=26"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=26" class="lightbox-iframe" title="taipei"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">taipei</h5><ul><li><strong>Date:</strong> 2011-05-04 15:40:35</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="5" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=27"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=27" class="lightbox-iframe" title="youtube"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">youtube</h5><ul><li><strong>Date:</strong> 2011-05-17 09:38:19</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="6" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=28"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=28" class="lightbox-iframe" title="testypt"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">testypt</h5><ul><li><strong>Date:</strong> 2011-05-17 09:42:22</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="7" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=36"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=36" class="lightbox-iframe" title="Test youtube"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Test youtube</h5><ul><li><strong>Date:</strong> 2011-05-20 10:16:26</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="8" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=37"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=37" class="lightbox-iframe" title="Ostone video"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Ostone video</h5><ul><li><strong>Date:</strong> 2011-05-20 11:58:50</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="9" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=38"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=38" class="lightbox-iframe" title="youtube test"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">youtube test</h5><ul><li><strong>Date:</strong> 2011-05-20 12:36:56</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="10" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=39"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=39" class="lightbox-iframe" title="not reuploaded"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">not reuploaded</h5><ul><li><strong>Date:</strong> 2011-05-23 13:21:56</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="11" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=41"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=41" class="lightbox-iframe" title="rere"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">rere</h5><ul><li><strong>Date:</strong> 2011-05-23 13:31:46</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="12" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=42"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=42" class="lightbox-iframe" title="rere2"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">rere2</h5><ul><li><strong>Date:</strong> 2011-05-23 13:51:27</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="13" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=43"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=43" class="lightbox-iframe" title="rere3"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">rere3</h5><ul><li><strong>Date:</strong> 2011-05-23 13:56:20</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="14" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=44"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=44" class="lightbox-iframe" title="Youtube penguin"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Youtube penguin</h5><ul><li><strong>Date:</strong> 2011-05-23 14:00:20</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-1 mix_all" data-id="15" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=45"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=45" class="lightbox-iframe" title="title"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">title</h5><ul><li><strong>Date:</strong> 2012-09-12 00:41:20</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="16" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=59"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=59" class="lightbox-iframe" title="Penguin"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Penguin</h5><ul><li><strong>Date:</strong> 2011-04-28 07:49:06</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="17" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=60"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=60" class="lightbox-iframe" title="Penguin 2"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Penguin 2</h5><ul><li><strong>Date:</strong> 2011-04-28 14:22:45</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="18" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=61"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=61" class="lightbox-iframe" title="Web"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Web</h5><ul><li><strong>Date:</strong> 2011-05-02 14:05:14</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="19" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=62"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=62" class="lightbox-iframe" title="wildlife"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">wildlife</h5><ul><li><strong>Date:</strong> 2011-05-03 08:03:48</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-1 mix_all" data-id="20" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=66"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=66" class="lightbox-iframe" title="taipei"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">taipei</h5><ul><li><strong>Date:</strong> 2011-05-04 15:40:35</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="21" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=67"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=67" class="lightbox-iframe" title="youtube"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">youtube</h5><ul><li><strong>Date:</strong> 2011-05-17 09:38:19</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="22" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=68"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=68" class="lightbox-iframe" title="testypt"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">testypt</h5><ul><li><strong>Date:</strong> 2011-05-17 09:42:22</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="23" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=76"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=76" class="lightbox-iframe" title="Test youtube"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Test youtube</h5><ul><li><strong>Date:</strong> 2011-05-20 10:16:26</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="24" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=77"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=77" class="lightbox-iframe" title="Ostone video"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Ostone video</h5><ul><li><strong>Date:</strong> 2011-05-20 11:58:50</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="25" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=78"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=78" class="lightbox-iframe" title="youtube test"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">youtube test</h5><ul><li><strong>Date:</strong> 2011-05-20 12:36:56</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="26" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=79"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=79" class="lightbox-iframe" title="not reuploaded"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">not reuploaded</h5><ul><li><strong>Date:</strong> 2011-05-23 13:21:56</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="27" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=81"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=81" class="lightbox-iframe" title="rere"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">rere</h5><ul><li><strong>Date:</strong> 2011-05-23 13:31:46</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="28" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=82"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=82" class="lightbox-iframe" title="rere2"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">rere2</h5><ul><li><strong>Date:</strong> 2011-05-23 13:51:27</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="29" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=83"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=83" class="lightbox-iframe" title="rere3"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">rere3</h5><ul><li><strong>Date:</strong> 2011-05-23 13:56:20</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="30" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=84"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=84" class="lightbox-iframe" title="Youtube penguin"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Youtube penguin</h5><ul><li><strong>Date:</strong> 2011-05-23 14:00:20</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-1 mix_all" data-id="31" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=85"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=85" class="lightbox-iframe" title="title"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">title</h5><ul><li><strong>Date:</strong> 2012-09-12 00:41:20</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="32" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=89"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=89" class="lightbox-iframe" title="Penguin"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Penguin</h5><ul><li><strong>Date:</strong> 2011-04-28 07:49:06</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="33" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=90"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=90" class="lightbox-iframe" title="Penguin 2"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Penguin 2</h5><ul><li><strong>Date:</strong> 2011-04-28 14:22:45</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="34" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=91"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=91" class="lightbox-iframe" title="Web"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Web</h5><ul><li><strong>Date:</strong> 2011-05-02 14:05:14</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="35" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=92"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=92" class="lightbox-iframe" title="wildlife"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">wildlife</h5><ul><li><strong>Date:</strong> 2011-05-03 08:03:48</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-1 mix_all" data-id="36" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=96"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=96" class="lightbox-iframe" title="taipei"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">taipei</h5><ul><li><strong>Date:</strong> 2011-05-04 15:40:35</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="37" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=97"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=97" class="lightbox-iframe" title="youtube"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">youtube</h5><ul><li><strong>Date:</strong> 2011-05-17 09:38:19</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="38" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=98"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=98" class="lightbox-iframe" title="testypt"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">testypt</h5><ul><li><strong>Date:</strong> 2011-05-17 09:42:22</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="39" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=101"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=101" class="lightbox-iframe" title="rere"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">rere</h5><ul><li><strong>Date:</strong> 2011-05-23 13:31:46</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="40" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=102"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=102" class="lightbox-iframe" title="rere2"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">rere2</h5><ul><li><strong>Date:</strong> 2011-05-23 13:51:27</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="41" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=103"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=103" class="lightbox-iframe" title="rere3"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">rere3</h5><ul><li><strong>Date:</strong> 2011-05-23 13:56:20</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="42" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=104"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=104" class="lightbox-iframe" title="Youtube penguin"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Youtube penguin</h5><ul><li><strong>Date:</strong> 2011-05-23 14:00:20</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-1 mix_all" data-id="43" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=105"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=105" class="lightbox-iframe" title="title"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">title</h5><ul><li><strong>Date:</strong> 2012-09-12 00:41:20</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="44" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=106"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=106" class="lightbox-iframe" title="Test youtube"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Test youtube</h5><ul><li><strong>Date:</strong> 2011-05-20 10:16:26</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-2 mix_all" data-id="45" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=107"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=107" class="lightbox-iframe" title="Ostone video"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">Ostone video</h5><ul><li><strong>Date:</strong> 2011-05-20 11:58:50</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="46" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=108"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=108" class="lightbox-iframe" title="youtube test"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">youtube test</h5><ul><li><strong>Date:</strong> 2011-05-20 12:36:56</li><li><strong>By:</strong> First Last</li></ul></div></li><li class="mix filter-0 mix_all" data-id="47" style="display: inline-block; opacity: 1;"><div class="cmanager-ctrls"><label><input type="checkbox" name="" /><span></span></label><div class="btn-group"><a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=109"> <i class="fa fa-cogs cmanager-media-trigger"></i></a><a href="#" class="btn btn-default btn-sm"><i class="fa fa-share-square-o" title="Distribution"></i></a><a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger"><i class="fa fa-trash-o"></i></a></div></div><div class="cmanager-list-thumb"><a href="/services/players/index.php?titleid=109" class="lightbox-iframe" title="not reuploaded"><img src="/uploads/thumbnails/no-thumb.gif" alt="/" /></a></div><div class="cmanager-list-info"><h5 class="text-primary">not reuploaded</h5><ul><li><strong>Date:</strong> 2011-05-23 13:21:56</li><li><strong>By:</strong> First Last</li></ul></div></li>                                
                                </ul><!-- // end main container -->
 
  <div id="pagingControls"></div>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:morako
ID: 39964826
I am modifying the js script to work for this example but no success yet..


// JavaScript Document
 var Imtech = {};
Imtech.Pager = function() {
    this.paragraphsPerPage = 10;
    this.currentPage = 1;
    this.pagingControlsContainer = '#pagingControls';
    this.pagingContainerPath = '#mix-1';

    this.numPages = function() {
        var numPages = 0;
        if (this.paragraphs !== null && this.paragraphsPerPage !== null) {
            numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
        }
        
        return numPages;
    };

    this.showPage = function(page) {
        this.currentPage = page;
        var html = '';

        this.paragraphs.slice((page-1) * this.paragraphsPerPage,
            ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage).each(function() {
            html += '<ul>' + $(this).html() + '</ul>';
        });

        $(this.pagingContainerPath).html(html);

        renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
    };

    var renderControls = function(container, currentPage, numPages) {
        var pagingControls = 'Page: <ul>';
        for (var i = 1; i <= numPages; i++) {
            if (i != currentPage) {
                pagingControls += '<li><a href="#" onclick="pager.showPage(' + i + '); return false;">' + i + '</a></li>';
            } else {
                pagingControls += '<li>' + i + '</li>';
            }
        }

        pagingControls += '</ul>';

        $(container).html(pagingControls);
    };
};

Open in new window

0
 

Author Comment

by:morako
ID: 39964841
Scott

A that is cleaner, and each <li> item has a unique identifier called data-id="#".

So the <ul class="cmanager-list pager" id="mix-1"><!-- //  main container -->

is the container id  and each list item is uniquely identified by  data-id="#"

hope this helps you help me...  Thanks in advance..  



<!DOCTYPE html>
<html>
    <head>
    <style>
      #pagingControls ul{display:inline;padding-left:0.5em}
    #pagingControls li{display:inline;padding:0 0.5em}
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    
      <script src="1.js"></script>
      
    
      <script>
        $(function () {
        //var foo = new Array(200);
        //for (var i = 0; i < foo.length; i++) {
            $('#ul').append('<li class=""mix">' + i + '</li>');
        //}
    
    
    });
    var pager = new Imtech.Pager();
    $(function () {
    
    
        pager.paragraphsPerPage = 10; // set amount elements per page
        pager.pagingContainer = $('#mix-1'); // set of main container
        pager.paragraphs = $('li.list', pager.pagingContainer); // set of required containers
        pager.showPage(1);
    });
        </script>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
     
        <ul class="cmanager-list pager" id="mix-1"><!-- //  main container -->
                                    
            <li class="mix filter-2 mix_all" data-id="0" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin1</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="1" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="2" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="3" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="4" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="5" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="6" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="7" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="8" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="9" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="10" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="11" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="12" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="12" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="14" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="15" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="16" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="17" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="18" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="19" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="20" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="21" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="22" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="23" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="24" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="25" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="26" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="27" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="28" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="29" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            
            
                                        
        </ul><!-- // end main container -->
     
        <div id="pagingControls"></div>
 
	</body>
</html>

Open in new window

0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 167 total points
ID: 39964871
You came close.  I have it working here http://jsbin.com/wufigude/5/edit?html,output

Wrap your ul in a container, give it an id and use that in the pager.pagingContainer.  In my sample, I used the id for the outside div#content.  

Next, use a common class in the li tag.  I saw you have, "mix_all" and used that.  Works nicely.  

var pager = new Imtech.Pager();
$(function () {


    pager.paragraphsPerPage = 10; // set amount elements per page
    pager.pagingContainer = $('#content'); // set of main container
    pager.paragraphs = $('li.mix_all', pager.pagingContainer); // set of required containers
    pager.showPage(1);
});

Open in new window


Full code below
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

  <script src="http://jsbin.com/jopiveyo/1.js"></script>
  <script>
  
var pager = new Imtech.Pager();
$(function () {


    pager.paragraphsPerPage = 10; // set amount elements per page
    pager.pagingContainer = $('#content'); // set of main container
    pager.paragraphs = $('li.mix_all', pager.pagingContainer); // set of required containers
    pager.showPage(1);
});
    </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div id="content">
        <ul class="cmanager-list pager" id="mix-1"><!-- //  main container -->

 <li class="mix filter-2 mix_all" data-id="0" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin1</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="1" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="2" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="3" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="4" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="5" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="6" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="7" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="8" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="9" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="10" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="11" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="12" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="12" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="14" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="15" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="16" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="17" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="18" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="19" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="20" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="21" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="22" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="23" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="24" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="25" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="26" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="27" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="28" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            <li class="mix filter-2 mix_all" data-id="29" style="display: inline-block; opacity: 1;">
                <div class="cmanager-ctrls">
                    <label><input type="checkbox" name="" /><span></span></label>
                    <div class="btn-group">
                        <a href="#cmanager-subtab-2" class="btn btn-default btn-sm" title="settings" data-tabs-load="/pages/media/media_details.php?titleid=19"> 
                            <i class="fa fa-cogs cmanager-media-trigger"></i>
                        </a>
                        <a href="#" class="btn btn-default btn-sm">
                            <i class="fa fa-share-square-o" title="Distribution"></i>
                        </a>
                        <a href="#cmanager-subtab-8" data-tabs-load="/pages/media/media_details.php" class="btn btn-default btn-sm media-delete-trigger">
                            <i class="fa fa-trash-o"></i>
                        </a>
                    </div>
                </div>
                <div class="cmanager-list-thumb">
                    <a href="/services/players/index.php?titleid=19" class="lightbox-iframe" title="Penguin">
                        <img src="/uploads/thumbnails/no-thumb.gif" alt="/" />
                    </a>
                </div>
                <div class="cmanager-list-info">
                    <h5 class="text-primary">Penguin</h5>
                    <ul>
                        <li><strong>Date:</strong> 2011-04-28 07:49:06</li>
                        <li><strong>By:</strong> First Last</li>
                    </ul>
                </div>
            </li>
            
</ul>
  </div>
  <div id="pagingControls"></div>
</body>
</html>

Open in new window


fyi, before you paste your code, note the word, "Code" in the top of the comment box.  When you click that, you will see a set of code tags.  Paste your code between those tags and your code will show up in a code box and will be easier to read.  

I edited your previous posts and made those updates.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39964875
If you are going to end up with 500 of these box's, it might be a good idea to load just a hundred at a time.  Then when the user gets to the last page, load another 100.  This will keep the page loading fast.  I would think once you start loading hundreds of these box's each with images, it could be a bit slow for the page to load.  

I would also check for mobile and load less at a time.  

If that is something you want to do, get this sample to work as is, then start another question.  It should be a matter of a simple ajax call that appends html to the last li tag once the user clicks the last page number.
0
 

Author Comment

by:morako
ID: 39964889
Scott you are correct in your assumption.  I will need to get this to work via ajax afterwards.

Although close, I am currently having two issues with the results from your solution.

It seems to transform the li into a div and I need to encapsulate the content with the ul..  Otherwise it breaks the entire template jquery framework I have in place.  Changing from the current structure will break all previous filtering and display options.


 <ul class="cmanager-list pager" id="mix-1"><!-- //  main container -->
                                   
            <li class="mix filter-2 mix_all" data-id="0" style="display: inline-block; opacity: 1;"><!-- list items -->
I can always do a hard coded reloading php pager but everything else is no reloading jquery driven.

Seems like the js needs to be massaged to keep the current structure I have.  Any thoughts?
grid2.JPG
grid3.JPG
0
 

Author Comment

by:morako
ID: 39964899
OK got it...   modified the 1.js file and the script and it worked.

http://jsbin.com/rohut/1/edit
0
 

Author Comment

by:morako
ID: 39964905
I don't have a handle on client side scripting (ajax/jQuery).  Scott this was really good of you to take your time and trouble shoot this with me.
0
 

Author Comment

by:morako
ID: 39964911
Before I move towards ajax loading, any thoughts on paging controls such as arrow left/right and select qty...  or should this be a new question?  I attached an image as a sample and some sample code...  just in case.


<button class="btn first"><i class="fa fa-step-backward"></i></button>
<button class="btn prev"><i class="fa fa-arrow-left"></i></button>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<button class="btn next"><i class="fa fa-arrow-right"></i></button>
<button class="btn last"><i class="fa fa-step-forward"></i></button>
<select class="pagesize input-xs" title="Select page size">
    <option selected="selected" value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option value="40">40</option>
</select>
<select class="pagenum input-xs" title="Select page number"></select>
grid4paging.JPG
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39964933
The arrows is a matter of style.  I think we have the major question answered here and for style and ajax, I think you should attack those separately.  

Just as a quick hint, font awesome could be a good icon set to use for this http://fortawesome.github.io/Font-Awesome/icons/  When you post this question, you can use the topics CSS and HTML since we are only concerned with the front end.

For ajax, the basic code is documented here jquery https://api.jquery.com/jQuery.ajax/  Remember to sanitize your incoming data on the php page and probably a function to ensure the post is coming from your domain.  When you post your question for this, you can use the topics Jquery, javascript, ajax
$.ajax({
  type: "POST",
  url: "some.php",
  data: { start_record: "1", end_record: "10" }
})
  .done(function( data ) {
    //jquery to append html here
  });

Open in new window

0
 

Author Comment

by:morako
ID: 39964940
Sounds like a plan.  Thanks..
0
 

Author Comment

by:morako
ID: 39964942
Thank you very much...
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39965328
Moroko,

Thank you for the points.  However, did the answer you accepted do the trick for this question?  We should mark the answer(s) that actually helped you.  Doing that will also help others that are looking at this question later.
0
 
LVL 33

Assisted Solution

by:Slick812
Slick812 earned 333 total points
ID: 39965342
OK, I was elsewhere, and missed the code talk here, any way, I did some code as I have the AJAX without any sort of added extras, may not be applicable to this but it works on my server, sorry about the delay, I only use 4, 5 ,and 7 for development display

first the HTML as grid.html
<!doctype html>
<html><head><title>Paging jQuery AJAX</title>
<style>
body{background:#e3f7ff;}
.cmanager-list{width:21.3em; padding:2px; margin:1px; background:#def; text-align:center; border:2px solid #5f5;}
.mix{width:5em;height:2.5em;padding:10px;margin:3px;background:#ddd;border:1px solid #d7d;}
.in{display:inline-block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>  // I use the latest version of Jquery as 1.11.0

var start1=0, ends=3, dis=4, maxim=24, lac=(maxim+1)%dis;

//I use an Independent (non Jquery) function doAjax( ) for the AJAX
function doAjax(be,lim) {
var ajOptions = {
  url: "gridpage.php",
  type: "POST",
  data: {b:be,l:lim},
  dataType: "text",
  timeout: 3500}
	
// get the Jquery AJAX in aj with $.ajax( )
var aj = $.ajax(ajOptions);
        
aj.done(function( received ) {// successful return of AJAX
  if(received.charAt(0)=="*"){
    var rArray= received.split("\v");
    var check1 = parseInt(rArray[1]);
// 9765432 is for detected code errors like DB select get no rows
	if(check1 == 9765432) {
      $('#ajaxRe').html(received);
      alert("ERROR - server DB ERROR, "+rArray[2]);
      return;
      }
    $('#mix-1').html(rArray[2]);
    $('#rang').html(start1+" to "+ends);
    }else {
    alert("ERROR - server Text Incorrect, Server Warning or Error");
    $('#ajaxRe').html(received);
    }
});
		
aj.fail(function(xhr, error1, err) {// UNsuccessful (error) return of AJAX
  if (xhr.status==404) alert("ERROR from Ajax as '404 status' the "+ajxOptions.url+
  " page was NOT on Server, \nCan NOT recover from this ERROR, This operation is NOT available!");
  else {
    alert("Ajax ERROR = \""+error1+"\", with server Status: "+xhr.status+", post-URL: "+ajxOptions.url+
	", \nresponseText length: "+aj.responseText.length+", \nerror because: "+err);
    }
  });
}// end doAjax( ) function
  
  
function doGrid(opp) {
switch (opp){
  case 0: if(start1 == 0) return;//begining
    start1=0;
    ends=dis-1; //$('#rang').html(start1+" to "+ends);
    $('#ajaxRe').html("str="+start1+" en="+ends+" dis="+dis+" max="+maxim+" lac"+lac);
    doAjax(start1,dis);
    break;

  case 1: if(start1 < dis) return;// advance
    start1-=dis;
    ends=(start1+dis)-1;
    $('#ajaxRe').html("str="+start1+" en="+ends+" dis="+dis+" max="+maxim+" lac"+lac);
    doAjax(start1,dis);
    //document.getElementById("rang").innerHTML=start1+" to "+ends; -=dis;
    break;
	
  case 2: var m=maxim-(maxim%dis)-1; if(ends > m) return;//decrease
    start1+=dis;
    ends+=dis;
    if(ends>maxim) ends=maxim;
    $('#ajaxRe').html("str="+start1+" en="+ends+" dis="+dis+" max="+maxim+" lac"+lac);
    doAjax(start1,dis);
    break;
	
  case 3: var m=maxim-(maxim%dis)-1; if(ends > m) return;// to last
    if(lac==0)start1=(maxim-dis)+1;else start1=(maxim-lac)+1;
    ends=maxim;
    $('#ajaxRe').html("str="+start1+" en="+ends+" dis="+dis+" max="+maxim+" lac"+lac);
    doAjax(start1,dis);
    break;
  
  case 4: var s=document.getElementById("sl1");// change the Num Display
    dis=parseInt(s.options[s.selectedIndex].value);
    start1=0;
    ends=dis-1;
    lac=(maxim+1)%dis;
    doAjax(start1,dis);
	$('#ajaxRe').html("str="+start1+" en="+ends+" dis="+dis+" max="+maxim+" lac"+lac);
    break;

  default: alert("ERROR doGrid("+opp+")");
  }
}
</script>
</head>
<body><h3 style="text-align:center;">Paging jQuery AJAX</h3>
<hr>
Now Showing <span id="rang">0 to 3</span> of 24;
<ul id="mix-1" class="cmanager-list pager">
<li class="mix filter-2 in" data-id="19">Peng 0 -19</li>
<li class="mix filter-2 in" data-id="20">Peng 1 -20</li>
<li class="mix filter-2 in" data-id="21">Peng 2 -21</li>
<li class="mix filter-2 in" data-id="22">Peng 3 -22</li>
</ul>
<button onclick="doGrid(0)">|&lt;</button> - <button onclick="doGrid(1)">&lt;</button> - <button onclick="doGrid(2)">&gt;</button> - <button onclick="doGrid(3)">&gt;|</button> - 
<select id="sl1" title="Select page size" onchange="doGrid(4)">
<option selected="selected" value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
<hr>
<div id="ajaxRe" style="border:2px solid #00d; min-height:2em;">No Development</div>
</body></html>

Open in new window

Next is the PHP as  gridpage.php
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
// Change the Type to text/plain
header('Cache-Control: no-cache');
header('Content-Type: text/plain');

function dbSelect($start1, $limit1) {
// I do NOT use a database, the SELECT might go -
// SELECT title_id title FROM t_list WHERE id = ? LIMIT ?
// $smt->bind_param('ss', $start1, $limit1);
$titles_list = array(array('title_id' => 19,'titletype_idkey' => 2,'title' => 'Peng 0'),
  array('title_id' => 20,'titletype_idkey' => 3,'title' => 'Peng 1'),
  array('title_id' => 21,'titletype_idkey' => 2,'title' => 'Peng 2'),
  array('title_id' => 22,'titletype_idkey' => 4,'title' => 'Peng 3'),
  array('title_id' => 26,'titletype_idkey' => 1,'title' => 'Peng 4'),
  array('title_id' => 27,'titletype_idkey' => 2,'title' => 'Peng 5'),
  array('title_id' => 28,'titletype_idkey' => 3,'title' => 'Peng 6'),
  array('title_id' => 36,'titletype_idkey' => 0,'title' => 'Peng 7'),
  array('title_id' => 37,'titletype_idkey' => 4,'title' => 'Peng 8'),
  array('title_id' => 38,'titletype_idkey' => 2,'title' => 'Peng 9'),
  array('title_id' => 39,'titletype_idkey' => 1,'title' => 'Peng 10'),
  array('title_id' => 41,'titletype_idkey' => 3,'title' => 'Peng 11'),
  array('title_id' => 42,'titletype_idkey' => 2,'title' => 'Peng 12'),
  array('title_id' => 43,'titletype_idkey' => 0,'title' => 'Peng 13'),
  array('title_id' => 44,'titletype_idkey' => 2,'title' => 'Peng 14'),
  array('title_id' => 45,'titletype_idkey' => 1,'title' => 'Peng 15'),
  array('title_id' => 46,'titletype_idkey' => 3,'title' => 'Peng 16'),
  array('title_id' => 51,'titletype_idkey' => 0,'title' => 'Peng 17'),
  array('title_id' => 52,'titletype_idkey' => 1,'title' => 'Peng 18'),
  array('title_id' => 53,'titletype_idkey' => 2,'title' => 'Peng 19'),
  array('title_id' => 54,'titletype_idkey' => 1,'title' => 'Peng 20'),
  array('title_id' => 56,'titletype_idkey' => 3,'title' => 'Peng 21'),
  array('title_id' => 57,'titletype_idkey' => 0,'title' => 'Peng 22'),
  array('title_id' => 58,'titletype_idkey' => 1,'title' => 'Peng 23'),
  array('title_id' => 59,'titletype_idkey' => 2,'title' => 'Peng 24')
  );

$ends = $start1+$limit1;
if ($ends > count($titles_list)) $ends = count($titles_list);
$re = '';
for ($i = $start1; $i < $ends; ++$i) {
extract($titles_list[$i]);
$re .= "<li class='mix filter-$titletype_idkey in' data-id='$title_id'>$title -$title_id</li>";
}
return $re;
}// end dbSelect( )

// IMPORTANT you MUST use the \v to do a CSV for the javascript to parse
// ALSO I start this with a * ,so if there are PHP warnings or ERRORS
// the Javascript can detect it and show the developer error to fix it. .
// the 9765432 is the error number used here for detected code errors
// NOT the PHP system errors
$ajaxOut = "*\v9765432\vAJAX FAILURE";
$errorCode = 'Ajax Error- length of post to long';
$pm = 1;

$b = (strlen($_POST['b']) > 4)? '-M':$_POST['b'];// allow the start to go to 9999
$lim = (strlen($_POST['l']) > 2)? 0:$_POST['l'];// allow the limit to go to 99

if($lim && ($b!='-M')) $errorCode = 'Ajax Failure error, ';
// Important, Check for ONLY Numeric
$pat = '/[^0-9]/';
if (preg_match($pat, $b) > 0) {
  $errorCode .= ' NON-NUMERIC in b '.$b;
  $pm = 0;
  }

if (preg_match($pat, $lim) > 0) {
  $errorCode .= ' NON-NUMERIC in lim '.$lim.' ';
  $pm = 0;
  }
if($pm && $lim && ($b!='-M')) {
  $ajaxOut = dbSelect($b, $lim);// Do database select
// IMPORTANT use \v to parse for CSV
  $ajaxOut = "*\v".$b."\v".$ajaxOut;
  } else
$ajaxOut = "*\v9765432\v".$errorCode;
header('Content-Length: '.strlen($ajaxOut));
echo $ajaxOut;
?>

Open in new window

0
 

Author Comment

by:morako
ID: 39965367
Actually I am having a problem with the jQuery paging code you gave me Scott as it is rewriting the li item and not bringing in any of the dynamic values that are on the li item itself therefore some of the functionality in the script in regards to filtering are not working although the paging is working.    

Also i am not sure how to go about changing the accepted question or reopening the question after it was closed.  Any help would be appreciated in that regard.

I am actually looking into the response provided by Slick812 as it already has an ajax paging into the db integrated with paging the li.  

Let me implement that method and see if it works out with out any breaks....
0
 

Author Comment

by:morako
ID: 39965421
Slick812

In regards to the grid code I have several questions.

I am dealing with many records therefore depending on the user he may want to page various quantities minimum of 5, but able to degrade to 1 if necessary.  

yours:
var start1=0, ends=3, dis=4, maxim=24, lac=(maxim+1)%dis;

mine:
var start1=0, ends=5, dis=5, maxim=100, lac=(maxim+1)%dis;


yous:
<button onClick="doGrid(0)">|&lt;</button> - <button onClick="doGrid(1)">&lt;</button> - <button onClick="doGrid(2)">&gt;</button> - <button onClick="doGrid(3)">&gt;|</button> -
<select id="sl1" title="Select page size" onChange="doGrid(4)">
<option selected="selected" value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
</select>


mine:
<button onClick="doGrid(0)">|&lt;</button> - <button onClick="doGrid(1)">&lt;</button> - <button onClick="doGrid(2)">&gt;</button> - <button onClick="doGrid(3)">&gt;|</button> -
<select id="sl1" title="Select page size" onChange="doGrid(5)">
<option selected="selected" value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>


These initial listings are hard coded into the page where I would need to dynamically begin pulling from the array.

Now Showing <span id="rang">0 to 3</span> of 24;

<li class="mix filter-2 in" data-id="19">Peng 0 -19</li>
<li class="mix filter-2 in" data-id="20">Peng 1 -20</li>
<li class="mix filter-2 in" data-id="21">Peng 2 -21</li>
<li class="mix filter-2 in" data-id="22">Peng 3 -22</li>

I guess my question is how do I make the set page as mine and the values load directly through ajax from the start instead of the initial hard count and hard code of the li items.


<!doctype html>
<html><head><title>Paging jQuery AJAX</title>
<style>
body{background:#e3f7ff;}
.cmanager-list{width:21.3em; padding:2px; margin:1px; background:#def; text-align:center; border:2px solid #5f5;}
.mix{width:5em;height:2.5em;padding:10px;margin:3px;background:#ddd;border:1px solid #d7d;}
.in{display:inline-block;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>  // I use the latest version of Jquery as 1.11.0

var start1=0, ends=3, dis=4, maxim=24, lac=(maxim+1)%dis;

//I use an Independent (non Jquery) function doAjax( ) for the AJAX
function doAjax(be,lim) {
var ajOptions = {
  url: "array.php",
  type: "POST",
  data: {b:be,l:lim},
  dataType: "text",
  timeout: 3500}
	
// get the Jquery AJAX in aj with $.ajax( )
var aj = $.ajax(ajOptions);
        
aj.done(function( received ) {// successful return of AJAX
  if(received.charAt(0)=="*"){
    var rArray= received.split("\v");
    var check1 = parseInt(rArray[1]);
// 9765432 is for detected code errors like DB select get no rows
	if(check1 == 9765432) {
      $('#ajaxRe').html(received);
      alert("ERROR - server DB ERROR, "+rArray[2]);
      return;
      }
    $('#mix-1').html(rArray[2]);
    $('#rang').html(start1+" to "+ends);
    }else {
    alert("ERROR - server Text Incorrect, Server Warning or Error");
    $('#ajaxRe').html(received);
    }
});
		
aj.fail(function(xhr, error1, err) {// UNsuccessful (error) return of AJAX
  if (xhr.status==404) alert("ERROR from Ajax as '404 status' the "+ajxOptions.url+
  " page was NOT on Server, \nCan NOT recover from this ERROR, This operation is NOT available!");
  else {
    alert("Ajax ERROR = \""+error1+"\", with server Status: "+xhr.status+", post-URL: "+ajxOptions.url+
	", \nresponseText length: "+aj.responseText.length+", \nerror because: "+err);
    }
  });
}// end doAjax( ) function
  
  
function doGrid(opp) {
switch (opp){
  case 0: if(start1 == 0) return;//begining
    start1=0;
    ends=dis-1; //$('#rang').html(start1+" to "+ends);
    $('#ajaxRe').html("str="+start1+" en="+ends+" dis="+dis+" max="+maxim+" lac"+lac);
    doAjax(start1,dis);
    break;

  case 1: if(start1 < dis) return;// advance
    start1-=dis;
    ends=(start1+dis)-1;
    $('#ajaxRe').html("str="+start1+" en="+ends+" dis="+dis+" max="+maxim+" lac"+lac);
    doAjax(start1,dis);
    //document.getElementById("rang").innerHTML=start1+" to "+ends; -=dis;
    break;
	
  case 2: var m=maxim-(maxim%dis)-1; if(ends > m) return;//decrease
    start1+=dis;
    ends+=dis;
    if(ends>maxim) ends=maxim;
    $('#ajaxRe').html("str="+start1+" en="+ends+" dis="+dis+" max="+maxim+" lac"+lac);
    doAjax(start1,dis);
    break;
	
  case 3: var m=maxim-(maxim%dis)-1; if(ends > m) return;// to last
    if(lac==0)start1=(maxim-dis)+1;else start1=(maxim-lac)+1;
    ends=maxim;
    $('#ajaxRe').html("str="+start1+" en="+ends+" dis="+dis+" max="+maxim+" lac"+lac);
    doAjax(start1,dis);
    break;
  
  case 4: var s=document.getElementById("sl1");// change the Num Display
    dis=parseInt(s.options[s.selectedIndex].value);
    start1=0;
    ends=dis-1;
    lac=(maxim+1)%dis;
    doAjax(start1,dis);
	$('#ajaxRe').html("str="+start1+" en="+ends+" dis="+dis+" max="+maxim+" lac"+lac);
    break;

  default: alert("ERROR doGrid("+opp+")");
  }
}
</script>
</head>
<body><h3 style="text-align:center;">Paging jQuery AJAX</h3>
<hr>
Now Showing <span id="rang">0 to 3</span> of 24;
<ul id="mix-1" class="cmanager-list pager">
<li class="mix filter-2 in" data-id="19">Peng 0 -19</li>
<li class="mix filter-2 in" data-id="20">Peng 1 -20</li>
<li class="mix filter-2 in" data-id="21">Peng 2 -21</li>
<li class="mix filter-2 in" data-id="22">Peng 3 -22</li>
</ul>
<button onClick="doGrid(0)">|&lt;</button> - <button onClick="doGrid(1)">&lt;</button> - <button onClick="doGrid(2)">&gt;</button> - <button onClick="doGrid(3)">&gt;|</button> - 
<select id="sl1" title="Select page size" onChange="doGrid(4)">
<option selected="selected" value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
</select>
<hr>
<div id="ajaxRe" style="border:2px solid #00d; min-height:2em;">No Development</div>
</body></html>
                                            

Open in new window

0
 

Author Comment

by:morako
ID: 39965422
FYI let me know if I need to reopen this or ask another question.
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 333 total points
ID: 39965523
OK, this part o de html -
<ul id="mix-1" class="cmanager-list pager">
<li class="mix filter-2 in" data-id="19">Peng 0 -19</li>
<li class="mix filter-2 in" data-id="20">Peng 1 -20</li>
<li class="mix filter-2 in" data-id="21">Peng 2 -21</li>
<li class="mix filter-2 in" data-id="22">Peng 3 -22</li>
</ul>

You already showd us de code -
foreach ($titles_list as $obj_key =>$title) {
  extract($title);
    echo "<li class='mix filter-$titletype_idkey' data-id='$obj_key'>";
    echo '<div class="cmanager-ctrls">';
  etc..     etc..

which you would use to get a DB SELECT or array foreach to place those in the needed<li> of the <ul>

for the -
var start1=0, ends=5, dis=5, maxim=100, lac=(maxim+1)%dis;

you would get the Maximum number (maxim=) of SELECT returns wid count(*) or other method and  then in PHP page write -
var start1=0,
ends=<?php echo $numDis ?>,
dis=<?php echo $numDis ?>,
maxim=<?php echo $count ?>,
lac=(maxim+1)%dis;

write in all of the Javascript values needed as Dynamic (changing) PHP variables.

It is a tremendously BIG mistake to call an AJAX to load values when the page first loads! !
anyone should do ALL server work while the PHP code is writing the page, can you see that AJAX is used to do server work, without a page load. . . . To do additional server work (as AJAX) when the page first loads is highly inefficient.

I did not do an PHP in the HTML page because I thought you already knew how to do that. and I just set some values to do development with this -
<ul id="mix-1" class="cmanager-list pager">
<li class="mix filter-2 in" data-id="19">Peng 0 -19</li>
<li class="mix filter-2 in" data-id="20">Peng 1 -20</li>
<li class="mix filter-2 in" data-id="21">Peng 2 -21</li>
<li class="mix filter-2 in" data-id="22">Peng 3 -22</li>
</ul>

I know this is nowhere near the amount or class or anything that you currently use, BUT my point of this was to use AJAX to update what was already written in the <ul> as a paging thing, I could have written <tr><td>Peng 0 -19</td></tr> or anything else as an update, I DO NOT CARE what you write, only that you can get a changing number of them as a paging sequence, that ends when the last is loaded, and can go to beginning an load the first batch on command.

for development I used developer nunbers -
Now Showing <span id="rang">0 to 3</span> of 24;
In production you add ONE
Now Showing 1 to 15 of 125;

you would also write the initial wid PHP
Now Showing <span id="rang"><?php echo $range; ?></span> of <?php echo $count; ?>;
0
 

Author Closing Comment

by:morako
ID: 39966197
Thank you Scott and Slick812.  Both solutions have merit in their unique ways.  I will most likely implement the Ajax for this, but have use for the li items paging from the array on the client side for another module.  Thank you both for your knowledgeable inputs.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now