limit query for pagination in php

Question

I have some code that LIMITs data to display only 50 items per page. The column I'm using has many items, so I need to make those spread out across the pages. below is my code

dip vyas · Answer

below is index.php include ( 'connect.php' ); ?> "utf-8" > Untitled Document "stylesheet" href= "css/diamond.css" > "stylesheet" href= "https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" > "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" > --> "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" > "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" > "https://raw.githubusercontent.com/simeydotme/jQuery-ui-Slider-Pips/master/dist/jquery-ui-slider-pips.js" > --> "stylesheet" href= "https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> "stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> "stylesheet" href= "//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" > "stylesheet" href= "https://raw.githubusercontent.com/simeydotme/jQuery-ui-Slider-Pips/master/dist/jquery-ui-slider-pips.css" >--> class = "container container1260 container-search-tablet ir217-diamond-search-header" > class = "row pt20" > class = "col-md-12 text-center" > Search for Diamonds class = "text-11" > class = "mb40 mt20" >Select your perfect diamond from thousands of natural, ethically sourced diamonds. "/lab-diamonds-search/" class = "td-u" >Searching for a lab created diamond? class = "container container1260 ir246-diamond-section ir246-diamond-search" > "mobile-ajax-loading" style= "width: 100%; position: relative; display: none;" > class = "loading hidden" style= "height: 1366px;" > "//css.brilliantearth.com/static/img/common/ajax-loading.gif" width= "66" height= "66" > class = "ir246-diamond-search__panel ir246-diamond-search__panel-main" > class = "row" > class = "col-md-6 item left" > class = "row" > class = "col-md-2 col-sm-2" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-target= "#shape-new" data-mobile-access= "ture" data-action= "Click" data-category= "Filter" data-label= "Shape" class = "text-inherit" >SHAPE class = "col-md-10 col-sm-10" > class = "ir246-product-shape-wrap shape-part" > class = "ir246-product-shape clearfix" > class = "round-details" data-action= "Unselect" data-label= "Loose Diamond|Shape" data-category= "Filter" data-shape= "Round" > "javascript:void(0);" > Round class = "oval-details active" data-action= "Select" data-label= "Loose Diamond|Shape" data-category= "Filter" data-shape= "Oval" > "javascript:void(0);" > Oval class = "cushion-details active" data-action= "Select" data-label= "Loose Diamond|Shape" data-category= "Filter" data-shape= "Cushion" > "javascript:void(0);" > Cushion class = "princess-details" data-action= "Unselect" data-label= "Loose Diamond|Shape" data-category= "Filter" data-shape= "Princess" > "javascript:void(0);" > Princess class = "pear-details" data-action= "Unselect" data-label= "Loose Diamond|Shape" data-category= "Filter" data-shape= "Pear" > "javascript:void(0);" > Pear class = "emerald-details" data-action= "Unselect" data-label= "Loose Diamond|Shape" data-category= "Filter" data-shape= "Emerald" > "javascript:void(0);" > Emerald class = "marquise-details" data-action= "Unselect" data-label= "Loose Diamond|Shape" data-category= "Filter" data-shape= "Marquise" > "javascript:void(0);" > Marquise class = "asscher-details" data-action= "Unselect" data-label= "Loose Diamond|Shape" data-category= "Filter" data-shape= "Asscher" > "javascript:void(0);" > Asscher class = "radiant-details" data-action= "Unselect" data-label= "Loose Diamond|Shape" data-category= "Filter" data-shape= "Radiant" > "javascript:void(0);" > Radiant class = "heart-details active" data-action= "Select" data-label= "Loose Diamond|Shape" data-category= "Filter" data-shape= "Heart" > "javascript:void(0);" > Heart --> $query = "SELECT DISTINCT(shape) FROM diamond_tbl WHERE product_status = '0' ORDER BY shape DESC" ; $statement = $connect ->prepare( $query ); $statement ->execute(); $result = $statement ->fetchAll(); foreach ( $result as $row ) { ?> "radio" name= "shape" class = "common_selector shape" value= " " > echo $row [ 'shape' ]; ?> } ?> class = "col-md-6 item right" > class = "row" > class = "col-md-2 col-sm-2" > class = "name help text-left-xs" > "javascript:void(0);" data-toggle= "modal" data-target= "#price-new" data-mobile-access= "ture" data-action= "Click" data-category= "Filter" data-label= "Price" >PRICE class = "col-md-10 col-sm-10" > class = "ir246-search-noUiSlider" > "shadow_price_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Price" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 61%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 61%;" > class = "slider-data form-inline" > class = "form-group pull-left" > "min_price_display" type= "text" pattern= "[0-9]*" class = "form-control input-sm amount-min" aria-label= "Min Price" > "min_price" name= "min_price" type= "text" class = "form-control input-sm amount-min hidden" > class = "form-group pull-right" > "max_price_display" type= "text" pattern= "[0-9]*" class = "form-control input-sm amount-max" aria-label= "Max Price" > "max_price" name= "max_price" type= "text" class = "form-control input-sm amount-max hidden" > --> "hidden" id= "hidden_minimum_price" class = "sliderValue2" data-index= "0" value= "530" /> "hidden" id= "hidden_maximum_price" class = "sliderValue2" data-index= "1" value= "539520" /> "price_show" >530 - 539520 "price_range" > class = "ir246-search-noUiSlider" > "price_slider" class = "noUiSlider hidden noUi-target noUi-ltr noUi-horizontal noUi-background" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 75.6081%;" > class = "noUi-handle noUi-handle-upper" > class = "row" > class = "col-md-6 item left" > class = "row" > class = "col-md-2 col-sm-2 h5" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-target= "#carat-weight" data-mobile-access= "ture" data-action= "Click" data-category= "Filter" data-label= "Carat" >CARAT class = "col-md-10 col-sm-10" > class = "ir246-search-noUiSlider" > "shadow_carat_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Carat" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 100%;" > class = "slider-data form-inline" > class = "form-group pull-left" > "min_carat_display" type= "text" class = "form-control input-xs amount-min" aria-label= "Min Carat" > "min_carat" name= "min_carat" class = "form-control input-xs amount-min hidden" > class = "form-group pull-right" > "max_carat_display" type= "text" class = "form-control input-xs amount-max" aria-label= "Max Carat" > "max_carat" name= "max_carat" class = "form-control input-xs amount-max hidden" > --> "slider2" > class = "sld-prt" > "text" class = "sliderValue2" data-index= "0" value= "0.29" /> "text" class = "sliderValue2" data-index= "1" value= "11.02" /> class = "ir246-search-noUiSlider" > "carat_slider" class = "noUiSlider hidden noUi-target noUi-ltr noUi-horizontal noUi-background" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "col-md-6 item right" > class = "row" > class = "col-md-2 col-sm-2 h5" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-target= "#modal_cut" data-mobile-access= "ture" data-action= "Click" data-category= "Filter" data-label= "Cut" >CUT class = "col-md-10 col-sm-10" > class = "ir246-search-noUiSlider" > "cut_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Cut" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 100%;" > class = "ui-slider-scale" > class = "fore1" > class = "fore2" > class = "fore3" > class = "fore4" > class = "cut-slider-data" > Fair Good Very class = "visible-xs" > Good Ideal Super class = "visible-xs" > Ideal "cuts" name= "cuts" type= "hidden" value= "Fair,Good,Very Good,Ideal,Super Ideal" > --> "slider4" > class = "fore1" > class = "fore2" > class = "fore3" > class = "fore4" > class = "cut-slider-data" > Fair Good Very class = "visible-xs" > Good Ideal Super class = "visible-xs" > Ideal class = "row" > class = "col-md-6 item left" > class = "row" > class = "col-md-2 col-sm-2 h5" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-target= "#modal_color" data-mobile-access= "ture" data-action= "Click" data-category= "Filter" data-label= "Color" >COLOR class = "col-md-10 col-sm-10 color-part" > class = "ir246-search-noUiSlider" > "color_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Color" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 100%;" > class = "ui-slider-scale" > class = "fore1" > class = "fore2" > class = "fore3" > class = "fore4" > class = "fore5" > class = "fore6" > class = "color-slider-data" > J I H G F E D "colors" name= "colors" type= "hidden" value= "J,I,H,G,F,E,D" > --> "hidden" id= "hidden_minimum_price2" class = "sliderValue2" data-index= "0" value= "0" /> "hidden" id= "hidden_maximum_price2" class = "sliderValue2" data-index= "1" value= "1" /> "price_range2" min= "0" max= "6" value= "0" > "price_show2" > class = "color-slider-data" > D E F G H I J class = "sld-prt" > "text" class = "sliderValue3" data-index= "0" value= "1" /> "text" class = "sliderValue3" data-index= "1" value= "7" /> --> class = "col-md-6 item right" > class = "row" > class = "col-md-2 col-sm-2 h5" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-target= "#modal_clarity" data-mobile-access= "ture" data-action= "Click" data-category= "Filter" data-label= "Clarity" > CLARITY class = "col-md-10 col-sm-10 clarity-part" > class = "ir246-search-noUiSlider" > "clarity_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Clarity" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 100%;" > class = "ui-slider-scale" > class = "fore1" > class = "fore2" > class = "fore3" > class = "fore4" > class = "fore5" > class = "fore6" > class = "fore7" > class = "clarity-slider-data" > SI2 SI1 VS2 VS1 VVS2 VVS1 IF FL "clarities" name= "clarities" type= "hidden" value= "SI2,SI1,VS2,VS1,VVS2,VVS1,IF,FL" > --> "hidden" id= "hidden_minimum_price3" class = "sliderValue2" data-index= "0" value= "0" /> "hidden" id= "hidden_maximum_price3" class = "sliderValue2" data-index= "1" value= "1" /> "price_range3" min= "0" max= "7" value= "0" > "price_show3" > class = "clarity-slider-data" > SI2 SI1 VS2 VS1 VVS2 VVS1 IF FL class = "sld-prt" > "text" class = "sliderValue5" data-index= "0" value= "1" /> "text" class = "sliderValue5" data-index= "1" value= "8" /> --> class = "ir246-real-view-available" > class = "ir246-diamond-search__panel ir246-advanced-filters" > class = "ir246-advanced-filters__content collapse" id= "collapseExample" >--> class = "row ir246-advanced-filters__content collapse" id= "collapseExample" style= "height: 1px;" > class = "col-md-12" > class = "row" > class = "col-md-12 item pb0 mb-10" id= "" > class = " help" id= "diamond_blockchain" style= "display: inline-block;padding-right: 30px;" > class = "checkbox checkbox-ty7 mt-0" data-filter-name= "diamond_blockchain" data-category= "Filter" data-action= "Select" data-label= "Loose Diamonds|Blockchain Enabled" style= "display: inline-block;" > class = "icons-checkbox" > Blockchain Enabled class = "glyphicon glyphicon-link text-success va-t fs-12" > "c_diamond_blockchain" type= "checkbox" value= "Yes" id= "input_diamond_blockchain" > "javascript:void(0);" data-toggle= "modal" data-mobile-access= "true" data-target= "#blockchain" style= "display: inline-block;vertical-align: top; position: relative; top: -3px;" > class = " help" id= "diamond_dor" style= "display: inline-block;" > class = "checkbox checkbox-ty7 mt-0" data-filter-name= "diamond_dor" data-category= "Filter" data-action= "Select" data-label= "Loose Diamonds|GIA Origin Report" style= "display: inline-block;" > class = "icons-checkbox" > GIA Origin Report class = "ir267-gia-origin-report-top1" src= "//css.brilliantearth.com/static/img/fillter/gia-logo.png" width= "16" > "c_diamond_dor" type= "checkbox" value= "Yes" id= "input_diamond_dor" > "javascript:void(0);" data-toggle= "modal" data-mobile-access= "true" data-target= "#dor" style= "display: inline-block;vertical-align: top; position: relative; top: -3px;" > class = "row row-section1 section-blockchain" > class = "col-md-6 item left" id= "origin_div" > class = "row" > class = "col-md-2 col-sm-2" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-target= "#origin-new" data-mobile-access= "ture" data-action= "Click" data-category= "Filter" data-label= "Origin" class = "text-inherit" >ORIGIN class = "col-md-10 col-sm-10" > class = "ir246-diamond-search-inline" > class = "checkbox checkbox-ty7" data-filter-name= "origin" data-category= "Filter" data-action= "Select" data-label= "Loose Diamond|Origin" > class = "icons-checkbox" > Canada "c_origin" type= "checkbox" value= "Canada" > class = "checkbox checkbox-ty7" data-filter-name= "origin" data-category= "Filter" data-action= "Select" data-label= "Loose Diamond|Origin" > class = "icons-checkbox" > Botswana Sort "c_origin" type= "checkbox" value= "Botswana Sort" > class = "checkbox checkbox-ty7" data-filter-name= "origin" data-category= "Filter" data-action= "Select" data-label= "Loose Diamond|Origin" > class = "icons-checkbox" > Russia "c_origin" type= "checkbox" value= "Russia" > class = "checkbox checkbox-ty7" data-filter-name= "origin" data-category= "Filter" data-action= "Select" data-label= "Loose Diamond|Origin" > class = "icons-checkbox" > Recycled "c_origin" type= "checkbox" value= "Recycled" > class = "col-md-6 item right" id= "report_div" > class = "row" > class = "col-md-2 col-sm-2" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-target= "#report-new" data-mobile-access= "ture" data-action= "Click" data-category= "Filter" data-label= "Report" class = "text-inherit" >REPORT class = "col-md-10 col-sm-10" > class = "ir246-diamond-search-inline mb0" > class = "checkbox checkbox-ty7" data-filter-name= "report" data-category= "Filter" data-action= "Select" data-label= "Loose Diamonds|Report" > class = "icons-checkbox" > GIA "c_report" type= "checkbox" value= "GIA" > class = "checkbox checkbox-ty7" data-filter-name= "report" data-category= "Filter" data-action= "Select" data-label= "Loose Diamonds|Report" > class = "icons-checkbox" > IGI "c_report" type= "checkbox" value= "IGI" > class = "row" > class = "col-md-6 item left" > class = "row" > class = "col-md-2 col-sm-2" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-mobile-access= "true" data-target= "#ratio-new" data-action= "Click" data-category= "Filter" data-label= "Length to width ratio" >L:W RATIO class = "col-md-10 col-sm-10" > class = "ir246-search-noUiSlider" > "ratio_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Length To Width Ratio" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 100%;" > class = "slider-data form-inline" > class = "form-group pull-left" > "min_ratio" name= "min_ratio" type= "text" class = "form-control input-xs amount-min" > class = "form-group pull-right" > "max_ratio" name= "max_ratio" type= "text" class = "form-control input-xs amount-max" > class = "col-md-6 item right" > class = "row" > class = "col-md-2 col-sm-2" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-mobile-access= "true" data-target= "#fluorescence-new" data-action= "Click" data-category= "Filter" data-label= "Fluorescence" >FLUOR. class = "col-md-10 col-sm-10" > class = "ir246-search-noUiSlider" > "fluorescence_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Fluorescence" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 100%;" > class = "ui-slider-scale" > class = "fore1" > class = "fore2" > class = "fore3" > class = "fore4" > class = "fluorescence-slider-data" > very strong strong class = "hidden-xs" >medium class = "visible-xs" >med. faint none "fluorescences" name= "fluorescences" type= "hidden" value= "Very Strong,Strong,Medium,Faint,None" > class = "row" > class = "col-md-6 item left" > class = "row" > class = "col-md-2 col-sm-2" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-mobile-access= "true" data-target= "#polish-new" data-action= "Click" data-category= "Filter" data-label= "Polish" >POLISH class = "col-md-10 col-sm-10" > class = "ir246-search-noUiSlider" > "polish_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Polish" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 100%;" > class = "ui-slider-scale" > class = "fore1" > class = "fore2" > class = "polish-slider-data" > Good Very Good Excellent "polishes" name= "polishes" type= "hidden" value= "Good,Very Good,Excellent" > class = "col-md-6 item right" > class = "row" > class = "col-md-2 col-sm-2" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-mobile-access= "true" data-target= "#symmetry-new" data-action= "Click" data-category= "Filter" data-label= "Symmetry" >SYMMETRY class = "col-md-10 col-sm-10" > class = "ir246-search-noUiSlider" > "symmetry_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Symmetry" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 100%;" > class = "ui-slider-scale" > class = "fore1" > class = "fore2" > class = "symmetry-slider-data" > Good Very Good Excellent "symmetries" name= "symmetries" type= "hidden" value= "Good,Very Good,Excellent" > class = "row" > class = "col-md-6 item left" > class = "row" > class = "col-md-2 col-sm-2" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-mobile-access= "true" data-target= "#table-new" data-action= "Click" data-category= "Filter" data-label= "Table %" >TABLE % class = "col-md-10 col-sm-10" > class = "ir246-search-noUiSlider" > "table_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Table %" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 100%;" > class = "slider-data form-inline" > class = "form-group pull-left" > "min_table_display" type= "text" pattern= "[0-9]*" class = "form-control input-xs amount-min" > "min_table" name= "min_table" type= "text" class = "form-control input-sm amount-min hidden" > class = "form-group pull-right" > "max_table_display" type= "text" pattern= "[0-9]*" class = "form-control input-xs amount-max" > "max_table" name= "max_table" type= "text" class = "form-control input-sm amount-max hidden" > class = "col-md-6 item right" > class = "row" > class = "col-md-2 col-sm-2" > class = "name help" > "javascript:void(0);" data-toggle= "modal" data-mobile-access= "true" data-target= "#depth-new" data-action= "Click" data-category= "Filter" data-label= "Depth %" >DEPTH % class = "col-md-10 col-sm-10" > class = "ir246-search-noUiSlider" > "depth_slider" class = "noUiSlider noUi-target noUi-ltr noUi-horizontal noUi-background" data-category= "Filter" data-action= "Slide" data-label= "Loose Diamond|Depth %" > class = "noUi-base" > class = "noUi-origin noUi-connect" data-style= "left" style= "left: 0%;" > class = "noUi-handle noUi-handle-lower" > class = "noUi-origin noUi-background" data-style= "left" style= "left: 100%;" > class = "noUi-handle noUi-handle-upper" > class = "ui-slider-left-cap" style= "right: 100%;" > class = "ui-slider-right-cap" style= "left: 100%;" > class = "slider-data form-inline" > class = "form-group pull-left" > "min_depth_display" type= "text" pattern= "[0-9]*" class = "form-control input-xs amount-min" > "min_depth" name= "min_table" type= "text" class = "form-control input-sm amount-min hidden" > class = "form-group pull-right" > "max_depth_display" type= "text" pattern= "[0-9]*" class = "form-control input-xs amount-max" > "max_depth" name= "max_depth" type= "text" class = "form-control input-sm amount-max hidden" > "screen" > .ir246-diamond-search__panel .item.left .ir246-delivery- date {float:none; } class = "row row-section1" > class = "col-md-6 item left" > class = "ir246-delivery-date" > class = "name" >DELIVERY class = "form-group ls-0 mb0" style= "display:inline-block;width:210px; height:30px;" > "shipping_day" class = "form-control bootstrap-select--2 selectpicker ir246-delivery-date-select" id= "shipping_day_select1" data-size= "false" data-category= "Filter" data-action= "Click" style= "display: none;" > "" style= "color: #000000 !important;" >On or before "2" style= "color: #000000 !important;text-transform:capitalize;" data-label= "Loose Diamonds|Delivery Date" onclick= "test()" >Friday, July 19 "3" style= "color: #000000 !important;text-transform:capitalize;" data-label= "Loose Diamonds|Delivery Date" onclick= "test()" >Monday, July 22 "4" style= "color: #000000 !important;text-transform:capitalize;" data-label= "Loose Diamonds|Delivery Date" onclick= "test()" >Tuesday, July 23 "5" style= "color: #000000 !important;text-transform:capitalize;" data-label= "Loose Diamonds|Delivery Date" onclick= "test()" >Wednesday, July 24 "6" style= "color: #000000 !important;text-transform:capitalize;" data-label= "Loose Diamonds|Delivery Date" onclick= "test()" >Thursday, July 25 "7" style= "color: #000000 !important;text-transform:capitalize;" data-label= "Loose Diamonds|Delivery Date" onclick= "test()" >Friday, July 26 "8" style= "color: #000000 !important;text-transform:capitalize;" data-label= "Loose Diamonds|Delivery Date" onclick= "test()" >Monday, July 29 "9" style= "color: #000000 !important;text-transform:capitalize;" data-label= "Loose Diamonds|Delivery Date" onclick= "test()" >Tuesday, July 30 "999" style= "color: #000000 !important;" data-label= "Loose Diamonds|Delivery Date" >Any Date class = "btn-group bootstrap-select form-control bootstrap-select--2 ir246-delivery-date-select" > "button" class = "btn dropdown-toggle" data-toggle= "dropdown" data-id= "shipping_day_select1" > class = "filter-option pull-left" >On or before class = "caret" > class = "dropdown-menu open" > class = "dropdown-menu inner" role= "menu" > "0" class = "selected" > "0" class = "" style= "color: #000000 !important;" > class = "text" >On or before class = "glyphicon glyphicon-ok icon-ok check-mark" > "1" > "0" class = "" style= "color: #000000 !important;text-transform:capitalize;" > class = "text" >Friday, July 19 class = "glyphicon glyphicon-ok icon-ok check-mark" > "2" > "0" class = "" style= "color: #000000 !important;text-transform:capitalize;" > class = "text" >Monday, July 22 class = "glyphicon glyphicon-ok icon-ok check-mark" > "3" > "0" class = "" style= "color: #000000 !important;text-transform:capitalize;" > class = "text" >Tuesday, July 23 class = "glyphicon glyphicon-ok icon-ok check-mark" > "4" > "0" class = "" style= "color: #000000 !important;text-transform:capitalize;" > class = "text" >Wednesday, July 24 class = "glyphicon glyphicon-ok icon-ok check-mark" > "5" > "0" class = "" style= "color: #000000 !important;text-transform:capitalize;" > class = "text" >Thursday, July 25 class = "glyphicon glyphicon-ok icon-ok check-mark" > "6" > "0" class = "" style= "color: #000000 !important;text-transform:capitalize;" > class = "text" >Friday, July 26 class = "glyphicon glyphicon-ok icon-ok check-mark" > "7" > "0" class = "" style= "color: #000000 !important;text-transform:capitalize;" > class = "text" >Monday, July 29 class = "glyphicon glyphicon-ok icon-ok check-mark" > "8" > "0" class = "" style= "color: #000000 !important;text-transform:capitalize;" > class = "text" >Tuesday, July 30 class = "glyphicon glyphicon-ok icon-ok check-mark" > "9" > "0" class = "" style= "color: #000000 !important;" > class = "text" >Any Date class = "glyphicon glyphicon-ok icon-ok check-mark" > "load_product" > --> class = "container" > "100%" border= "1" cellpadding= "1" cellspacing= "1" class = "diamond_tbl filter_data" id= "load_product" > $(document).ready( function (){ filter_data(); function filter_data() { $( '.filter_data' ).html( ' ' ); var action = 'product' ; var minimum_price = $( '#hidden_minimum_price' ).val(); var maximum_price = $( '#hidden_maximum_price' ).val(); var shape = get_filter( 'shape' ); var color = get_filter( 'color' ); var clarity = get_filter( 'clarity' ); $.ajax({ url: "product.php" , method: "POST" , data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, shape:shape, color:color, clarity:clarity}, success: function (data){ $( '.filter_data' ).html(data); } }); } function get_filter(class_name) { var filter = []; $( '.' +class_name+ ':checked' ).each( function (){ filter.push($(this).val()); //$(this).prop('checked', false); }); return filter; } $( '.common_selector' ).click( function (){ filter_data(); }); $( '#price_range' ).slider({ range:true, min:530, max:539520, values:[530, 539520], stop: function (event, ui) { $( '#price_show' ).html(ui.values[0] + ' - ' + ui.values[1]); $( '#hidden_minimum_price' ).val(ui.values[0]); $( '#hidden_maximum_price' ).val(ui.values[1]); filter_data(); } }); }); --> $(document).ready( function (){ filter_data(); function filter_data() { $( '.filter_data' ).html( ' ' ); var action = 'product' ; var minimum_price = $( '#hidden_minimum_price' ).val(); var maximum_price = $( '#hidden_maximum_price' ).val(); var minimum_price2 = $( '#hidden_minimum_price2' ).val(); var maximum_price2 = $( '#hidden_maximum_price2' ).val(); var minimum_price3 = $( '#hidden_minimum_price3' ).val(); var maximum_price3 = $( '#hidden_maximum_price3' ).val(); var shape = get_filter( 'shape' ); //var color = get_filter('color'); //var clarity = get_filter('clarity'); $.ajax({ url: "product.php" , method: "POST" , data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, minimum_price2:minimum_price2, maximum_price2:maximum_price2, minimum_price3:minimum_price3, maximum_price3:maximum_price3, shape:shape}, async:false, success: function (data){ $( '.filter_data' ).html(data); } }); } function get_filter(class_name) { var filter = []; $( '.' +class_name+ ':checked' ).each( function (){ filter.push($(this).val()); //$(this).prop('checked', false); }); return filter; } $( '.common_selector' ).click( function (){ filter_data(); }); $( '#price_range' ).slider({ range:true, min:530, max:539520, values:[530, 539520], stop: function (event, ui) { $( '#price_show' ).html(ui.values[0] + ' - ' + ui.values[1]); $( '#hidden_minimum_price' ).val(ui.values[0]); $( '#hidden_maximum_price' ).val(ui.values[1]); filter_data(); } }); var values = [68, 69, 70, 71, 72, 73, 74]; $( "#price_range2" ).slider({ min: 68, max: 74, values:[74, 68], slide: function ( event, ui ) { $( '#price_show2' ).text(String.fromCharCode(ui.value)); $( '#hidden_minimum_price2' ).val(String.fromCharCode(ui.values[0])); //alert(String.fromCharCode(ui.values[0])); $( '#hidden_maximum_price2' ).val(String.fromCharCode(ui.values[1])); filter_data(); } }); var p = { 0: "SI2" , 25: "SI1" , 50: "VS2" , 75: "VS1" , 100: "VVS2" , 125: "VVS1" , 150: "IF" , 175: "FL" }; $( "#price_range3" ).slider({ values:[0, 175], min: 0, max: 175, step: 25, slide: function (event, ui) { $( '#hidden_minimum_price3' ).val(ui.values[0]); $( '#hidden_maximum_price3' ).val(ui.values[1]); $( "#price_show3" ).val(p[$( "#price_range3" ).slider( "values" )]); filter_data(); } }); }); below is product.php //fetch_data.php include ( 'connect.php' ); if (isset( $_POST [ "action" ])) { $query = "SELECT * FROM diamond_tbl WHERE product_status = '0' " ; if (isset( $_POST [ "minimum_price" ], $_POST [ "maximum_price" ]) && ! empty empty ( $_POST [ "minimum_price" ]) && ! empty empty ( $_POST [ "maximum_price" ])) { $query .= "AND price BETWEEN '" . $_POST [ "minimum_price" ]. "' AND '" . $_POST [ "maximum_price" ]. "'" ; } if (isset( $_POST [ "minimum_price2" ], $_POST [ "maximum_price2" ]) && ! empty empty ( $_POST [ "minimum_price2" ]) && ! empty empty ( $_POST [ "maximum_price2" ])) { $items = array (); foreach (range( $_POST [ "minimum_price2" ], $_POST [ "maximum_price2" ]) as $letter ) { $items [] = $letter ; } $it =implode( "','" , $items ); $it = "'" . $it . "'" ; //$query .= "AND color LIKE '".$_POST["minimum_price2"].'%'."' OR color LIKE '".$_POST["maximum_price2"].'%'."'"; //$query .= "AND color LIKE '".$_POST["minimum_price2"].'%'."' AND color LIKE '".$_POST["maximum_price2"].'%'."'"; //$query .= "AND (color LIKE '".$_POST["minimum_price2"].'%'."') OR (color LIKE '".$_POST["maximum_price2"].'%'."')"; //$query .= "AND (color LIKE '".$_POST["minimum_price2"].'%'."' OR color LIKE '".$_POST["maximum_price2"].'%'."')"; $query .= "AND color in($it)" ; } if (isset( $_POST [ "minimum_price3" ], $_POST [ "maximum_price3" ]) && ! empty empty ( $_POST [ "minimum_price3" ]) && ! empty empty ( $_POST [ "maximum_price3" ])) { $clarity = array ( "0" => "SI2" , "25" => "SI1" , "50" => "VS2" , "75" => "VS1" , "100" => "VVS2" , "125" => "VVS1" , "150" => "IF" , "175" => "FL" ); //$clarity[$_POST["minimum_price3"]]; //$clarity[$_POST["maximum_price3"]]; $key_arr = array (); $clarity_key = array ( "0" , "25" , "50" , "75" , "100" , "125" , "150" , "175" ); $min_key = array_search ( $_POST [ "minimum_price3" ], $clarity_key ); $max_key = array_search ( $_POST [ "maximum_price3" ], $clarity_key ); for ( $i = $min_key ; $i $max_key ; $i ++){ $key_arr []= $clarity_key [ $i ]; } //print_r($key_arr); $cnt = count ( $key_arr ); //echo $clarity["0"]; for ( $i = 0; $i $cnt ; $i ++){ $value_arr []= $clarity [ "$key_arr[$i]" ]; } //print_r($value_arr); $it2 =implode( "','" , $value_arr ); $it2 = "'" . $it2 . "'" ; $query .= "AND clarity in($it2)" ; } if (isset( $_POST [ "shape" ])) { $brand_filter = implode( "','" , $_POST [ "shape" ]); $query .= "AND shape IN('" . $brand_filter . "') " ; } $query .= " ORDER BY price ASC" ; $statement = $connect ->prepare( $query ); $statement ->execute(); $result = $statement ->fetchAll(); $total_row = $statement ->rowCount(); $output = '' ; if ( $total_row > 0) { foreach ( $result as $row ) { $output .= ' '.$row["shape"].' '.$row["carat"].' '.$row["color"].' '.$row["clarity"].' '.$row["cut"].' '.$row["report"].' '.$row["origin"].' '.$row["price"].' '; } } else { $output = ' No Data Found ' ; } echo $output ; } ?> and below is connect.php /* Title : Ajax Pagination with jQuery & PHP Example URL : http://www.sanwebe.com/2013/03/ajax-pagination-with-jquery-php */ $connect = new PDO( "mysql:host=localhost;dbname=diamond" , "root" , "" ); ?> now i want add pagination on this.

Abhijeet Jadhav · Answer

Code is not visible.