CODEWITHSUNDEEP
jqueryjsf-2primefacesdatatable
Matt Kagan
Matt Kagan

Reputation: 719

Draggable rows in primefaces datatable - a way to save the order of the table?

I am trying to implement draggable rows on a datatable in primefaces. I know that Primefaces has draggable rows in a datatable "planned for a future release". I am currently trying to find some way to implement this functionality myself.

I used the following bit of jquery code to make the rows draggable

$(".ui-datatable.sortable tbody").sortable();

However, this does not save the order of the rows once you leave the page. I have a button that gets pressed to save the table, and I am trying to see if I can write a function that saves the order of rows.

Something similar to what is implemented in the last post here: http://forum.primefaces.org/viewtopic.php?f=3&t=2678 . But instead of doing this every time the row is swapped, I want to save the table once, when the "Save" button below is pressed. Is this possible to implement?

Thank you.

Upvotes: 0

Views: 5779

Answers (2)

Ajay Srivastava
Ajay Srivastava

Reputation: 39

add this to your xhtml file it will work perfectly .It might help to others who using primefaces 4.0 or lesser version.

<script type="text/javascript">
            jQuery(function() {
                jQuery('.ui-datatable tbody').sortable();
            });
</script>

Upvotes: 1

skuntsel
skuntsel

Reputation: 11742

I don't really understand why you decided to post the question if you already have hints for the answer. But as no one decided to take upon the answer to the question, I'll do it.

Basically all you have to do is to tie up the calculation of reordered list indices to an onclick event of your command button and get the new order in your action method to process the reordered list. I used a dedicated field of a managed bean to keep the order, but it is absolutely unnecessary. Below foes the setup.

The view:

<h:head>
    <h:outputScript name="js/pf.js" target="body"/>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
</h:head>
<h:body>
    <h:form id="form">
        <p:dataTable id="table" var="data" value="#{sortableDatatableBean.list}" widgetVar="tabSort" rowIndexVar="rowIndex">
            <p:column headerText="##">
                <h:outputText styleClass="row" value="#{rowIndex}"/>
            </p:column>
            <p:column headerText="Name">
                <h:outputText value="#{data.name}" />
            </p:column>
            <p:column headerText="Value">
                <h:outputText value="#{data.value}" />
            </p:column>
        </p:dataTable>
        <h:inputHidden id="order" value="#{sortableDatatableBean.order}"/>
        <p:commandButton value="Submit" ajax="false" onclick="return doOrder()" action="#{sortableDatatableBean.action}"/>
    </h:form>
</h:body>

The javascript (pf.js):

$(document).ready(function() {
    $(tabSort.jqId + '.ui-datatable tbody').sortable();
    $(tabSort.jqId + '.ui-datatable tbody').disableSelection();
});

function doOrder() {
    var order = '';
    var len = $('.row').length;
    $('.row').each(function(index) {
        order += ($(this).text() + ((index == (len - 1)) ? '' : ';'));
    });
    $('#form\\:order').val(order);
    return true;
}

The managed bean:

@ManagedBean
@RequestScoped
public class SortableDatatableBean {

    private String order = "0;1";//getter+setter
    private List<Data> list;//getter+setter

    public SortableDatatableBean() {
        list = new ArrayList<Data>();
        Data d;
        d = new Data("name", "value");
        list.add(d);
        d = new Data("name1", "value1");
        list.add(d);
    }

    public String action() {
        //String order = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("form:order");
        List<Data> reordered = new ArrayList<Data>();
        for(String s : order.split(";")) {
            try {
                Integer i = Integer.parseInt(s);
                Data data = list.get(i);
                reordered.add(data);
            } catch(NumberFormatException nfe) {
            }
        }
        this.list = reordered;
        return null;
    }

}

The model:

public class Data {

    private String name;
    private String value;

    public Data() {
    }

    public Data(String name, String value) {
        this.name = name;
        this.value = value;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }

}

Upvotes: 3

Related Questions