index.php - flexigrid

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
<title>Flexigrid</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />

<script src="dist/Autolinker.min.js"></script>
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $("#flex1").flexigrid
            (
            {
            url: 'post2.php',
            dataType: 'json',
            colModel : [
                {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
                {display: 'ISO', name : 'iso', width : 80, sortable : true, align: 'left'},
                {display: 'Name', name : 'name', width : 300, sortable : true, align: 'left'},

                {display: 'Printable Name', name : 'printable_name', width : 90, sortable : true, align: 'center'},
                {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'center', hide: false},
                {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'center'},
                {display: 'Extra', name : 'extra', width : 80, sortable : true, align: 'center', hide: true}
                ],
            buttons : [
                {name: 'Add', bclass: 'add', onpress : test},
                {name: 'Delete', bclass: 'delete', onpress : test},
                {separator: true},
                {name: 'Anime', onpress: sortAlpha},
                {name: 'Ebook', onpress: sortAlpha},
                {name: 'Film', onpress: sortAlpha},
                {name: 'Giochi PC', onpress: sortAlpha},
                {name: 'Xbox360', onpress: sortAlpha},

                {name: 'PS3', onpress: sortAlpha},
                {name: 'Software', onpress: sortAlpha},
                {name: 'Musica', onpress: sortAlpha},
                {name: 'Teatro', onpress: sortAlpha},

                {name: '5', onpress: sortAlpha},
                {name: 'A', onpress: sortAlpha},
                {name: 'B', onpress: sortAlpha},
                {name: 'C', onpress: sortAlpha},
                {name: 'D', onpress: sortAlpha},
                {name: 'E', onpress: sortAlpha},
                {name: 'F', onpress: sortAlpha},
                {name: 'G', onpress: sortAlpha},
                {name: 'H', onpress: sortAlpha},
                {name: 'I', onpress: sortAlpha},
                {name: 'J', onpress: sortAlpha},
                {name: 'K', onpress: sortAlpha},
                {name: 'L', onpress: sortAlpha},
                {name: 'M', onpress: sortAlpha},
                {name: 'N', onpress: sortAlpha},
                {name: 'O', onpress: sortAlpha},
                {name: 'P', onpress: sortAlpha},
                {name: 'Q', onpress: sortAlpha},
                {name: 'R', onpress: sortAlpha},
                {name: 'S', onpress: sortAlpha},
                {name: 'T', onpress: sortAlpha},
                {name: 'U', onpress: sortAlpha},
                {name: 'V', onpress: sortAlpha},
                {name: 'W', onpress: sortAlpha},
                {name: 'X', onpress: sortAlpha},
                {name: 'Y', onpress: sortAlpha},
                {name: 'Z', onpress: sortAlpha},
                {name: '#', onpress: sortAlpha},
                {name: 'あ', onpress: sortAlpha}


                ],
            searchitems : [
                {display: 'ISO', name : 'iso'},
                {display: 'ISO3', name : 'iso3'},
                {display: 'Printable Name', name : 'printable_name'},
                {display: 'Number Code', name : 'numcode'},
                {display: 'Name', name : 'name', isdefault: true}

                ],
            sortname: "id",
            sortorder: "asc",
            usepager: true,
            title: 'Motore di Ricerca',
            useRp: true,
            rp: 15,
            showTableToggleBtn: true,
            width: 900,
            height: 355
            }
            );

});
function sortAlpha(com)
            {
            jQuery('#flex1').flexOptions({newp:1, params:[{name:'letter_pressed', value: com},{name:'qtype',value:$('select[name=qtype]').val()}]});
            jQuery("#flex1").flexReload();
            }

function test(com,grid)
{
    if (com=='Delete')
        {
           if($('.trSelected',grid).length>0){
           if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
            var items = $('.trSelected',grid);
            var itemlist ='';
            for(i=0;i<items.length;i++){
                itemlist+= items[i].id.substr(3)+",";
            }
            $.ajax({
               type: "POST",
               dataType: "json",
               url: "delete.php",
               data: "items="+itemlist,
               success: function(data){
                alert("Query: "+data.query+" - Total affected rows: "+data.total);
               $("#flex1").flexReload();
               }
             });
            }
            } else {
                return false;
            }
        }
    else if (com=='Add')
        {
            alert('Add New Item Action');

        }
}
</script>
</head>

<body>

<table id="flex1" style="display:none"></table>
<br /><br />

</body>
</html>