Customize a list view by using client-side rendering in SharePoint 2013

http://msdn.microsoft.com/en-us/library/jj220045.aspx
http://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
http://msdn.microsoft.com/en-us/library/jj220061.aspx

vs2012->file->new->project c# ->office/SharePoint->apps->apps for SharePoint 2013-> "CSRListViewApp"

Click on 'Validate' Button 

Click on 'Finish' Button.

 CSRListViewApp -> Right Click -> Add -> New Item -> List -> "CustomList"

CSRListViewApp -> CustomList -> CustomListInstance -> Elements.xml

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

       <ListInstance Title="CustomList"

                             OnQuickLaunch="TRUE"

                             TemplateType="10057"

                             Url="Lists/CustomList"

                             Description="My List Instance">

              <Data>

                     <Rows>

                           <Row>

                                  <Field Name="Title">List Item Title 1</Field>

                                  <Field Name="Body">List Item Body</Field>

                           </Row>

                           <Row>

                                  <Field Name="Title">List Item Title 2</Field>

                                  <Field Name="Body">List Item Body</Field>

                           </Row>

                           <Row>

                                  <Field Name="Title">List Item Title 3</Field>

                                  <Field Name="Body">List Item Body</Field>

                           </Row>

                           <Row>

                                  <Field Name="Title">List Item Title 4</Field>

                                  <Field Name="Body">List Item Body</Field>

                           </Row>

                           <Row>

                                  <Field Name="Title">List Item Title 5</Field>

                                  <Field Name="Body">List Item Body</Field>

                           </Row>

                     </Rows>

              </Data>

       </ListInstance>

</Elements> 

CSRListViewApp -> CustomList -> Elements.xml

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

       <ListTemplate

        Name="CustomList"

        Type="10057"

        BaseType="0"

        OnQuickLaunch="TRUE"

        SecurityBits="11"

        Sequence="320"

        DisplayName="CustomList"

        Description="My List Definition"

        Image="/_layouts/15/images/itann.png"/>

</Elements>

CSRListViewApp -> CustomList -> Schema.xml
add below script before "</Views>" tag and after "<View>"

<View BaseViewID="2"

                       Name="8d2719f3-c3c3-415b-989d-33840d8e2ddb"

                       DisplayName="Overridable"

                       Type="HTML"

                       WebPartZoneID="Main"

                       SetupPath="pages\viewpage.aspx"

                       Url="Overridable.aspx"

                       DefaultView="TRUE">

                     <ViewFields>

                           <FieldRef Name="Title" />

                     </ViewFields>

                     <Query />

                     <Toolbar Type="Standard" />

                     <XslLink>main.xsl</XslLink>

                     <JSLink Default="TRUE">~site/Scripts/CSRListView.js</JSLink>

              </View>

CSRListViewApp -> Scripts-> Add new "CSRListView.js"

and add below the custom js code for CSRListViewApp

(function () {

    var overrideCtx = {};

    overrideCtx.Templates = {};

    overrideCtx.Templates.Header = "<B><#=ctx.ListTitle#></B>" + "<hr><ul id='unorderedlist'>";

    overrideCtx.Templates.Item = customItem;

    overrideCtx.Templates.Footer = "</ul>";

    overrideCtx.BaseViewID = 2;

    overrideCtx.ListTemplateType = 10057;

    overrideCtx.OnPreRender = preRenderHandler;

    overrideCtx.OnPostRender = postRenderHandler;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

function customItem(ctx) {

    var ret = "<li>" + ctx.CurrentItem.Title + "</li>";

    return ret;

}

function preRenderHandler(ctx) {

    ctx.ListTitle = prompt("Type a title", ctx.ListTitle);

}

function postRenderHandler(ctx) {

    var ulObj;

    var i, j;

    ulObj = document.getElementById("unorderedlist");

    for (i = 1; i < ulObj.children.length; i++) {

        var x = ulObj.children[i];

        for (j = 1; j < ulObj.children.length; j++) {

            var y = ulObj.children[j];

            if (x.innerText < y.innerText) {

                ulObj.insertBefore(y, x);

            }

        }

    }

}

 CSRListViewApp -> double click on 'AppManifest.xml'
change the start page url as "CSRListViewApp/Lists/CustomList/Overridable.aspx"

CSRListViewApp -> Right Click -> Deploy 

Thank You