with strip_tags remove quitar para funcion etiquetas ejemplo php jquery html pagination isotope

php - remove - strip_tags wordpress



Cómo implementar Isotopo con Paginación (4)

¿Has revisado el siguiente enlace?

https://codepen.io/Igorxp5/pen/ojJLQE

Tiene un ejemplo funcional de isótopo con paginación.

Eche un vistazo al siguiente bloque de código en la sección JS en particular.

var $container = $(''#container'').isotope({ itemSelector: itemSelector, masonry: { columnWidth: itemSelector, isFitWidth: true } });

Estoy tratando de implementar isótopos con paginación en mi sitio de WordPress (que obviamente es un problema para la mayoría de las personas). He llegado a un escenario que puede funcionar si puedo resolver algunas cosas.

En mi página, tengo esta parte de mi script de isótopos -

$(''.goforward'').click(function(event) { var href = $(this).attr(''href''); $(''.isotope'').empty(); $(''.isotope'').load(href +".html .isotope > *"); $( ''div.box'' ).addClass( ''isotope-item'' ); $container.append( $items ).isotope( ''insert'', $items, true ); event.preventDefault(); });

Entonces estoy usando esta función de paginación que modifiqué desde here para tener la clase ''goforward'' -

function isotope_pagination($pages = '''', $range = 2) { $showitems = ($range * 2)+1; global $paged; if(empty($paged)) $paged = 1; if($pages == '''') { global $wp_query; $pages = $wp_query->max_num_pages; if(!$pages) { $pages = 1; } } if(1 != $pages) { echo "<div class=''pagination''>"; for ($i=1; $i <= $pages; $i++) { if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) { echo ($paged == $i)? "<a href=''".get_pagenum_link($i)."'' class=''inactive goforward''>".$i."</a>":"<a href=''".get_pagenum_link($i)."'' class=''inactive goforward'' >".$i."</a>"; } } echo "</div>/n"; } }

Primer problema : tengo problemas con el filtrado / clasificación. Se filtra bien para la primera página, pero no ordena. En la segunda página o en cualquier otra página cargada, no agrega / inserta o incluso filtra / ordena cuando comienza de cero en esa página. En cambio, al tratar de hacerlo, me da este error:

Uncaught TypeError: Cannot read property ''[object Array]'' of undefined

Segundo problema : al cargar los fragmentos de la página, hay un retraso y la página actual sigue siendo visible antes de que el siguiente fragmento de página se cargue en su lugar.

Sé que muchas personas tienen problemas con el isótopo y la paginación, por lo general, terminan usando desplazamiento infinito a pesar de que el autor del isótopo no lo recomienda.

Así que mi teoría está cargando contenido a través de load () y tengo una devolución de llamada de algún tipo para mostrar solo los elementos filtrados.

¿Alguna idea sobre cómo lograr esto?

Mi script completo de isótopos ---

$(function () { var selectChoice, updatePageState, updateFiltersFromObject, $container = $(''.isotope''); $items = $(''.item''); //////////////////////////////////////////////////////////////////////////////////// /// EVENT HANDLERS //////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////// // Mark filtering element as active/inactive and trigger filters update $(''.js-filter'').on( ''click'', ''[data-filter]'', function (event) { event.preventDefault(); selectChoice($(this), {click: true}); $container.trigger(''filter-update''); }); ////////////////////////////////////////////////////// // Sort filtered (or not) elements $(''.js-sort'').on(''click'', ''[data-sort]'', function (event) { event.preventDefault(); selectChoice($(this), {click: true}); $container.trigger(''filter-update''); }); ////////////////////////////////////////////////////// // Listen to filters update event and update Isotope filters based on the marked elements $container.on(''filter-update'', function (event, opts) { var filters, sorting, push; opts = opts || {}; filters = $(''.js-filter li.active a:not([data-filter="all"])'').map(function () { return $(this).data(''filter''); }).toArray(); sorting = $(''.js-sort li.active a'').map(function () { return $(this).data(''sort''); }).toArray(); if (typeof opts.pushState == ''undefined'' || opts.pushState) { updatePageState(filters, sorting); } $container.isotope({ filter: filters.join(''''), sortBy: sorting }); }); ////////////////////////////////////////////////////// // Set a handler for history state change History.Adapter.bind(window, ''statechange'', function () { var state = History.getState(); updateFiltersFromObject(state.data); $container.trigger(''filter-update'', {pushState: false}); }); //////////////////////////////////////////////////////////////////////////////////// /// HELPERS FUNCTIONS //////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////// // Build an URI to get the query string to update the page history state updatePageState = function (filters, sorting) { var uri = new URI(''''); $.each(filters, function (idx, filter) { var match = /^/.([^-]+)-(.*)$/.exec(filter); if (match && match.length == 3) { uri.addSearch(match[1], match[2]); } }); $.each(sorting, function (idx, sort) { uri.addSearch(''sort'', sort); }); History.pushState(uri.search(true), null, uri.search() || ''?''); }; ////////////////////////////////////////////////////// // Select the clicked (or from URL) choice in the dropdown menu selectChoice = function ($link, opts) { var $group = $link.closest(''.btn-group''), $li = $link.closest(''li''), mediumFilter = $group.length == 0; if (mediumFilter) { $group = $link.closest(''.js-filter''); } if (opts.click) { $li.toggleClass(''active''); } else { $li.addClass(''active''); } $group.find(''.active'').not($li).removeClass(''active''); if (!mediumFilter) { if ($group.find(''li.active'').length == 0) { $group.find(''li:first-child'').addClass(''active''); } $group.find(''.selection'').html($group.find(''li.active a'').first().html()); } }; ////////////////////////////////////////////////////// // Update filters by the values in the current URL updateFiltersFromObject = function (values) { if ($.isEmptyObject(values)) { $(''.js-filter'').each(function () { selectChoice($(this).find(''li'').first(), {click: false}); }); selectChoice($(''.js-sort'').find(''li'').first(), {click: false}); } else { $.each(values, function (key, val) { val = typeof val == ''string'' ? [val] : val; $.each(val, function (idx, v) { var $filter = $(''[data-filter=".'' + key + ''-'' + v + ''"]''), $sort = $(''[data-sort="'' + v + ''"]''); if ($filter.length > 0) { selectChoice($filter, {click: false}); } else if ($sort.length > 0) { selectChoice($sort, {click: false}); } }); }); } }; //////////////////////////////////////////////////////////////////////////////////// /// Initialization //////////////////////////////////////////////////////////////////////////////////// ////////////////////////////////////////////////////// // Initialize Isotope $container.imagesLoaded( function(){ $container.isotope({ masonry: { resizesContainer: true }, itemSelector: ''.item'', getSortData: { date: function ( itemElem ) { var date = $( itemElem ).find(''.thedate'').text(); return parseInt( date.replace( /[/(/)]/g, '''') ); }, area: function( itemElem ) { // function var area = $( itemElem ).find(''.thearea'').text(); return parseInt( area.replace( /[/(/)]/g, '''') ); }, price: function( itemElem ) { // function var price = $( itemElem ).find(''.theprice'').text(); return parseInt( price.replace( /[/(/)]/g, '''') ); } } }); var total = $(".next a:last").html(); var pgCount = 1; var numPg = total; pgCount++; $(''.goback'').click(function() { $(''.isotope'').empty(); $(''.isotope'').load("/page/<?php echo --$paged;?>/?<?php echo $_SERVER["QUERY_STRING"]; ?>.html .isotope > *"); $container.append( $items ).isotope( ''insert'', $items, true ); $( ''div.box'' ).addClass( ''isotope-item'' ); }); $(''.goforward'').click(function(event) { var href = $(this).attr(''href''); $(''.isotope'').empty(); $(''.isotope'').load(href +".html .isotope > *"); $( ''div.box'' ).addClass( ''isotope-item'' ); $container.append( $items ).isotope( ''insert'', $items, true ); event.preventDefault(); }); }); ////////////////////////////////////////////////////// // Initialize counters $(''.stat-count'').each(function () { var $count = $(this), filter = $count.closest(''[data-filter]'').data(''filter''); $count.html($(filter).length); }); ////////////////////////////////////////////////////// // Set initial filters from URL updateFiltersFromObject(new URI().search(true)); $container.trigger(''filter-update'', {pushState: false}); }); });


Verifique el enlace a continuación si es útil

https://mixitup.kunkalabs.com/extensions/pagination/

También puede usar lazy loder para paginación.

Espero que esto te ayude


codepen.io/Igorxp5/pen/ojJLQE

Esto está bien para mí solo un poco de preguntas ¿Cómo agregar next / prev a la paginación y cómo agregar una clase activa a la paginación?

y lo último "falta o está mal formado". este texto aparece después de mi menú de paginación. No sé qué significa eso.


<a href="http://codepen.io/Igorxp5/pen/ojJLQE"></a>

Creo que esto te ayudará.

Referir esta URL