[Ask] Mengubah $_GET dengan Image onclick

[suicidal]

Langsung aja ke kasus nya. Saya buat simple aja biar mudah dimengerti.

Misalkan saya punya link seperti ini :

PHP Code:

<?php
echo "<a href='produk.php?cat=8'>Kategori Produk ke 8</a>";
?>

Lalu saya punya button seperti ini :

PHP Code:

<?php
echo "<img src='images/asc.png'/>";
echo "<img src='images/desc.png'/>";
?>

Nah yang saya tanyakan, gimana syntax onlick yang dipasangkan pada img asc.png supaya hasilnya seperti ini :

PHP Code:

product.php?cat=8&sort=asc 


Lalu pada saat saya klik img desc.png, yang berubah adalah method $_GET sortnya, jadi seperti ini :

PHP Code:

product.php?cat=8&sort=desc 


Note :
Sebenernya bisa dengan cara :

PHP Code:

echo "<img src='img/asc.png' onclick=window.location='product.php?cat=$_GET[cat]&sort=asc'/>";
echo "<img src='img/desc.png' onclick=window.location='product.php?cat=$_GET[cat]&sort=desc'/>"; 


Namun jika ada 10 sort dan 10 method $_GET kan jd puyeng om T_T

Mohon dibantu yah om om kalo ada yang bisa.

[ditatompel]

Hehe.. Maksudnya gimana omz? Ane agak kurang ngerti nih?

[wenkhairu]

hm..... itu untuk sorting data ya ? kalo ane biasanya pake plugin
jquery yang untuk sorting data itu, tapi kalo mau manual seperti itu
mungkin ini bisa membantu

PHP Code:

<script src="jquery.js"></script>
<script>
    $(function(){
        $("a.sort").bind('click',function(event){
            //biar waktu klik ga ngikut arah link
            event.preventDefault();
            //ambil path href sekarang di URI
            var pathname = window.location.href;
            //pisahkan dengan tanda & 
            var current = pathname.split('&');
            //ambil variable dari nilai href tujuan
            var sort=$(this).attr("href");
            //redirect ke url baru dan mengacuhkan
            //paramter setelah tanda &
            //jadi ngambil uri awal saja
            window.location.href=current[0]+'&sort='+sort;
        });
    });
</script>
<a href='tes.php?cat=8'>Kategori Produk ke 8</a>
<br />
<a href='des' class="sort">des</a>
<a href='asc' class="sort">asc</a>
<a href='tes1' class="sort">tes1</a>
<a href='tes2' class="sort">tes2</a>
<a href='tes3' class="sort">tes3</a> 


[suicidal]

(03-01-2012 09:12 PM)ditatompel Wrote:  Hehe.. Maksudnya gimana omz? Ane agak kurang ngerti nih?

Maksudnya jadi kayak ngisi query dengan method $_GET om.
Contohnya
produk.php?cat=8 , lalu klik sort maka urlnya jadi produk.php?cat=8&sort=asc , lalu klik tipe, maka urlnya jadi produk.php?cat=8&sort=asc&tipe=all

Secara ga langsung Querynya begini

PHP Code:

produk.php?cat=8
SELECT * FROM produk WHERE cat_id='8'

produk.php?cat=8&sort=asc
SELECT * FROM produk WHERE cat_id='8' ORDER BY id ASC

produk.php?cat=8&sort=asc&tipe=all
SELECT * FROM produk WHERE cat_id='8' AND tipe='all' ORDER BY id ASC 


(03-01-2012 09:33 PM)wenkhairu Wrote:  hm..... itu untuk sorting data ya ? kalo ane biasanya pake plugin
jquery yang untuk sorting data itu, tapi kalo mau manual seperti itu
mungkin ini bisa membantu

PHP Code:

<script src="jquery.js"></script>
<script>
    $(function(){
        $("a.sort").bind('click',function(event){
            //biar waktu klik ga ngikut arah link
            event.preventDefault();
            //ambil path href sekarang di URI
            var pathname = window.location.href;
            //pisahkan dengan tanda & 
            var current = pathname.split('&');
            //ambil variable dari nilai href tujuan
            var sort=$(this).attr("href");
            //redirect ke url baru dan mengacuhkan
            //paramter setelah tanda &
            //jadi ngambil uri awal saja
            window.location.href=current[0]+'&sort='+sort;
        });
    });
</script>
<a href='tes.php?cat=8'>Kategori Produk ke 8</a>
<br />
<a href='des' class="sort">des</a>
<a href='asc' class="sort">asc</a>
<a href='tes1' class="sort">tes1</a>
<a href='tes2' class="sort">tes2</a>
<a href='tes3' class="sort">tes3</a> 


Makasih om wenk, btw ini yang manual ya ?
Kalo yang jquery yg kyk gmn ?
Saya googling kebanyakan jquery sorting untuk table =="
Bisa di modif sih, tapi puyeng liatnya

[Cruz3N]

Ane pake plugin ini Bro...

Code:

/**
* jQuery.fn.sortElements
* --------------
* @param Function comparator:
*   Exactly the same behaviour as [1,2,3].sort(comparator)
*  
* @param Function getSortable
*   A function that should return the element that is
*   to be sorted. The comparator will run on the
*   current collection, but you may want the actual
*   resulting sort to occur on a parent or another
*   associated element.
*  
*   E.g. $('td').sortElements(comparator, function(){
*      return this.parentNode;
*   })
*  
*   The <td>'s parent (<tr>) will be sorted instead
*   of the <td> itself.
*/
jQuery.fn.sortElements = (function(){

    var sort = [].sort;

    return function(comparator, getSortable) {

        getSortable = getSortable || function(){return this;};

        var placements = this.map(function(){

            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,

                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );

            return function() {

                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }

                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);

            };

        });

        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });

    };

})();

Jadi misalkan kita punya data kayak gini

Code:

<ul>
    <li>Sempak</li>
    <li>Besi</li>
    <li>Portable</li>
</ul>

Untuk sortingnya sebagai berikut

Code:

$('li').sortElements(function(a, b){
    return $(a).text() > $(b).text() ? 1 : -1;
});

Nanti bakalan jadi kayak gini

Code:

<ul>
    <li>Besi</li>
    <li>Portable</li>
    <li>Sempak</li>
</ul>

Nih demonya ada disini

Code:

http://qd9.co.uk/projects/jQuery-Plugins/sort/demo.html

Maksudnya kayak gitu Bro?

[suicidal]

@cruzen
Kalo misalkan custom ada ga ?
Itu kan a-z doang, kalo misalkan saya mau sorting berdasarkan 2 table di database.
Contoh :
1. Sorting Asc Huruf
2. Sorting Desc Huruf
3. Sorting Asc Harga
4. Sorting Desc Harga

Maenin div dari produknya disini tapi bingung wkkwwk

Code:

$('li').sortElements(function(a, b){
    return $(a).text() > $(b).text() ? 1 : -1;
});